From f4caedeabcce6d1e66f109741ef7e8da493fc961 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E6=B5=A9=E9=BA=9F?= Date: Sat, 14 Jul 2018 12:08:46 +0800 Subject: [PATCH 1/2] support webpack4 close https://github.com/gwuhaolin/web-webpack-plugin/issues/21 --- .prettierrc | 5 + demo/auto-plugin-logic-filename/README.md | 12 +- .../dist/home++.html | 2 +- demo/auto-plugin-logic-filename/dist/home.js | 141 +- .../dist/login++.html | 2 +- demo/auto-plugin-logic-filename/dist/login.js | 145 +- .../dist/signup++.html | 2 +- .../auto-plugin-logic-filename/dist/signup.js | 144 +- .../src/home/index.js | 2 +- .../src/login/index.js | 2 +- .../src/signup/index.js | 2 +- .../webpack.config.js | 14 +- demo/auto-plugin/README.md | 74 +- demo/auto-plugin/dist-js-prod/common.css | 4 + demo/auto-plugin/dist-js-prod/common.js | 2 +- demo/auto-plugin/dist-js-prod/home.css | 5 +- demo/auto-plugin/dist-js-prod/home.html | 21 +- demo/auto-plugin/dist-js-prod/home.js | 2 +- demo/auto-plugin/dist-js-prod/ie_polyfill.js | 2 +- demo/auto-plugin/dist-js-prod/login.css | 5 +- demo/auto-plugin/dist-js-prod/login.html | 21 +- demo/auto-plugin/dist-js-prod/login.js | 2 +- demo/auto-plugin/dist-js-prod/polyfill.js | 2 +- demo/auto-plugin/dist-js-prod/signup.css | 5 +- demo/auto-plugin/dist-js-prod/signup.html | 21 +- demo/auto-plugin/dist-js-prod/signup.js | 2 +- demo/auto-plugin/dist/common.css | 4 + demo/auto-plugin/dist/common.js | 658 +------ demo/auto-plugin/dist/home.css | 3 +- demo/auto-plugin/dist/home.html | 3 +- demo/auto-plugin/dist/home.js | 190 +- demo/auto-plugin/dist/ie_polyfill.js | 41 +- demo/auto-plugin/dist/login.css | 3 +- demo/auto-plugin/dist/login.html | 3 +- demo/auto-plugin/dist/login.js | 194 +- demo/auto-plugin/dist/polyfill.js | 41 +- demo/auto-plugin/dist/signup.css | 3 +- demo/auto-plugin/dist/signup.html | 3 +- demo/auto-plugin/dist/signup.js | 186 +- demo/auto-plugin/src/home/index.css | 2 +- demo/auto-plugin/src/home/index.js | 4 +- demo/auto-plugin/src/ie_polyfill.js | 2 +- demo/auto-plugin/src/ignore/index.css | 3 + demo/auto-plugin/src/ignore/index.js | 2 +- demo/auto-plugin/src/login/index.css | 2 +- demo/auto-plugin/src/login/index.js | 4 +- demo/auto-plugin/src/polyfill.js | 2 +- demo/auto-plugin/src/signup/index.css | 2 +- demo/auto-plugin/src/signup/index.js | 4 +- demo/auto-plugin/src/template.html | 2 + demo/auto-plugin/webpack.config.js | 52 +- demo/config-html-attribute/README.md | 20 +- demo/config-html-attribute/a.js | 2 +- demo/config-html-attribute/b.js | 2 +- demo/config-html-attribute/dist/A.js | 74 +- demo/config-html-attribute/dist/B.js | 75 +- .../dist/google-analyze.js | 2 +- demo/config-html-attribute/dist/index.html | 5 +- demo/config-html-attribute/google-analyze.js | 2 +- demo/config-html-attribute/reset.min.css | 4 +- demo/config-html-attribute/webpack.config.js | 4 +- demo/config-resource/README.md | 65 +- demo/config-resource/dev.js | 2 +- demo/config-resource/dist-js-prod/dev.js | 2 +- .../dist-js-prod/google-analytics.js | 2 +- .../dist-js-prod/googleAnalytics.js | 2 +- .../dist-js-prod/ie-polyfill.js | 2 +- demo/config-resource/dist-js-prod/index.html | 2 +- demo/config-resource/dist-js-prod/inline.js | 2 +- demo/config-resource/dist-js/dev.js | 76 +- .../dist-js/googleAnalytics.js | 76 +- demo/config-resource/dist-js/ie-polyfill.js | 74 +- demo/config-resource/dist-js/inline.js | 75 +- demo/config-resource/dist-template/dev.js | 76 +- .../dist-template/googleAnalytics.js | 76 +- .../dist-template/ie-polyfill.js | 74 +- demo/config-resource/dist-template/index.html | 75 +- demo/config-resource/dist-template/inline.js | 75 +- demo/config-resource/google-analytics.js | 2 +- demo/config-resource/ie-polyfill.js | 2 +- demo/config-resource/inline.js | 2 +- .../webpack.config-template.js | 6 +- demo/config-resource/webpack.config.js | 20 +- demo/extract-css/1.css | 2 +- demo/extract-css/1.js | 2 +- demo/extract-css/2.css | 2 +- demo/extract-css/2.js | 2 +- demo/extract-css/3.css | 2 +- demo/extract-css/3.js | 2 +- demo/extract-css/4.css | 2 +- demo/extract-css/4.js | 2 +- demo/extract-css/README.md | 76 +- demo/extract-css/dist/1.css | 3 +- demo/extract-css/dist/1.js | 59 +- demo/extract-css/dist/2.css | 3 +- demo/extract-css/dist/2.js | 61 +- demo/extract-css/dist/3.css | 3 +- demo/extract-css/dist/3.js | 52 +- demo/extract-css/dist/4.css | 3 +- demo/extract-css/dist/4.js | 52 +- demo/extract-css/dist/index.html | 4 +- demo/extract-css/webpack.config.js | 24 +- demo/hmr/a/index.css | 2 +- demo/hmr/a/index.js | 2 +- demo/hmr/dist/a.js | 1655 ++++++++-------- demo/hmr/dist/b.js | 1668 +++++++++-------- demo/hmr/pages/b/index.css | 2 +- demo/hmr/pages/b/index.js | 2 +- demo/hmr/webpack.config.js | 10 +- demo/issue6/README.md | 2 +- demo/issue6/dist/home.css | 3 +- demo/issue6/dist/home.html | 92 +- demo/issue6/dist/home.js | 88 +- demo/issue6/dist/login.css | 3 +- demo/issue6/dist/login.html | 95 +- demo/issue6/dist/login.js | 91 +- demo/issue6/dist/polyfill.js | 76 +- demo/issue6/dist/signup.css | 3 +- demo/issue6/dist/signup.html | 96 +- demo/issue6/dist/signup.js | 92 +- demo/issue6/src/home/index.css | 2 +- demo/issue6/src/home/index.js | 2 +- demo/issue6/src/login/index.css | 2 +- demo/issue6/src/login/index.js | 2 +- demo/issue6/src/polyfill.js | 2 +- demo/issue6/src/signup/index.css | 2 +- demo/issue6/src/signup/index.js | 2 +- demo/issue6/webpack.config.js | 23 +- demo/load-local-file/README.md | 13 +- demo/load-local-file/a.js | 2 +- .../dist-prod/A_31bda441e4109dd7675b.js | 1 - demo/load-local-file/dist-prod/README.md | 13 +- demo/load-local-file/dist-prod/ie-polyfill.js | 2 +- demo/load-local-file/dist-prod/index.html | 2 +- demo/load-local-file/dist-prod/jquery.js | 2 +- demo/load-local-file/dist/A.js | 74 +- demo/load-local-file/dist/README.md | 13 +- demo/load-local-file/dist/ie-polyfill.js | 2 +- demo/load-local-file/dist/index.html | 3 +- demo/load-local-file/dist/jquery.js | 2 +- demo/load-local-file/ie-polyfill.js | 2 +- demo/load-local-file/jquery.js | 2 +- demo/load-local-file/reset.css | 2 +- demo/load-local-file/webpack-prod.config.js | 6 +- demo/load-local-file/webpack.config.js | 4 +- demo/minify-html/README.md | 15 +- demo/minify-html/a.js | 2 +- demo/minify-html/dist/A.js | 80 +- demo/minify-html/dist/index.html | 83 +- demo/minify-html/reset.min.css | 2 +- demo/minify-html/webpack.config.js | 6 +- demo/out-html/a.js | 2 +- demo/out-html/b.js | 2 +- demo/out-html/dist/A.js | 74 +- demo/out-html/dist/B.js | 75 +- demo/out-html/webpack.config.js | 4 +- demo/pre-post-entrys/dist/google-analytics.js | 75 +- demo/pre-post-entrys/dist/page1.js | 95 +- demo/pre-post-entrys/dist/polyfill.js | 74 +- demo/pre-post-entrys/google-analytics.js | 2 +- demo/pre-post-entrys/pages/page1/index.js | 2 +- demo/pre-post-entrys/polyfill.js | 2 +- demo/pre-post-entrys/webpack.config.js | 10 +- demo/public-path/README.md | 35 +- demo/public-path/a.css | 2 +- demo/public-path/a.js | 2 +- demo/public-path/b.css | 2 +- demo/public-path/b.js | 2 +- demo/public-path/dist/A.css | 3 +- demo/public-path/dist/A.js | 81 +- demo/public-path/dist/B.css | 3 +- demo/public-path/dist/B.js | 83 +- demo/public-path/webpack.config.js | 19 +- demo/relative-path-public-path/README.md | 3 +- demo/relative-path-public-path/a.css | 2 +- demo/relative-path-public-path/a.js | 2 +- demo/relative-path-public-path/b.css | 2 +- demo/relative-path-public-path/b.js | 2 +- .../dist/{css => }/A.css | 3 +- .../dist}/B.css | 3 +- demo/relative-path-public-path/dist/README.md | 3 +- .../dist/html/index.html | 4 +- demo/relative-path-public-path/dist/js/A.js | 88 +- demo/relative-path-public-path/dist/js/B.js | 84 +- .../webpack.config.js | 21 +- demo/relative-path/README.md | 3 +- demo/relative-path/a.css | 2 +- demo/relative-path/a.js | 2 +- demo/relative-path/b.css | 2 +- demo/relative-path/b.js | 2 +- demo/relative-path/dist/{css => }/A.css | 3 +- .../dist/css => relative-path/dist}/B.css | 3 +- demo/relative-path/dist/README.md | 3 +- demo/relative-path/dist/html/index.html | 4 +- demo/relative-path/dist/js/A.js | 88 +- demo/relative-path/dist/js/B.js | 84 +- demo/relative-path/webpack.config.js | 19 +- demo/use-template-complier/README.md | 10 +- demo/use-template-complier/dist/a.html | 5 +- demo/use-template-complier/dist/a.js | 81 +- demo/use-template-complier/dist/b.html | 5 +- demo/use-template-complier/dist/b.js | 83 +- .../dist/google-analyze.js | 2 +- demo/use-template-complier/google-analyze.js | 2 +- demo/use-template-complier/pages/a/index.js | 2 +- demo/use-template-complier/pages/b/index.js | 2 +- demo/use-template-complier/reset.min.css | 4 +- demo/use-template-complier/webpack.config.js | 12 +- demo/use-template/README.md | 26 +- demo/use-template/a.js | 2 +- demo/use-template/b.js | 2 +- demo/use-template/dist/A.js | 74 +- demo/use-template/dist/B.js | 75 +- demo/use-template/dist/google-analyze.js | 2 +- demo/use-template/dist/index.html | 5 +- demo/use-template/google-analyze.js | 2 +- demo/use-template/reset.min.css | 4 +- demo/use-template/webpack.config.js | 4 +- demo/watch-template/README.md | 2 +- demo/watch-template/a.js | 2 +- demo/watch-template/b.js | 2 +- demo/watch-template/dist/A.js | 155 +- demo/watch-template/dist/B.js | 157 +- demo/watch-template/dist/google-analyze.js | 2 +- demo/watch-template/google-analyze.js | 2 +- demo/watch-template/reset.min.css | 4 +- demo/watch-template/webpack.config.js | 4 +- index.js | 2 +- lib/AutoWebPlugin.js | 79 +- lib/HTMLDocument.js | 71 +- lib/Resource.js | 139 +- lib/WebPlugin.js | 39 +- lib/util.js | 64 +- package.json | 26 +- readme.md | 425 +++-- readme_zh.md | 412 ++-- test.js | 8 +- 237 files changed, 4228 insertions(+), 6592 deletions(-) create mode 100644 .prettierrc create mode 100644 demo/auto-plugin/dist-js-prod/common.css create mode 100644 demo/auto-plugin/dist/common.css create mode 100644 demo/auto-plugin/src/ignore/index.css delete mode 100644 demo/load-local-file/dist-prod/A_31bda441e4109dd7675b.js rename demo/relative-path-public-path/dist/{css => }/A.css (91%) rename demo/{relative-path/dist/css => relative-path-public-path/dist}/B.css (91%) rename demo/relative-path/dist/{css => }/A.css (91%) rename demo/{relative-path-public-path/dist/css => relative-path/dist}/B.css (91%) diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..e537c8a --- /dev/null +++ b/.prettierrc @@ -0,0 +1,5 @@ +{ + "singleQuote": true, + "trailingComma": "es5", + "arrowParens": "always" +} diff --git a/demo/auto-plugin-logic-filename/README.md b/demo/auto-plugin-logic-filename/README.md index 4944060..627f6ae 100644 --- a/demo/auto-plugin-logic-filename/README.md +++ b/demo/auto-plugin-logic-filename/README.md @@ -1,11 +1,11 @@ -# AutoWebPlugin 可以自定义输出的html文件名称 +# AutoWebPlugin 可以自定义输出的 html 文件名称 -`AutoWebPlugin` 可以自定义输出的html文件名称的逻辑，只需给 filename 传一个 function 即可。 -这个函数定义为：`(pageName)=> newPageName`， +`AutoWebPlugin` 可以自定义输出的 html 文件名称的逻辑，只需给 filename 传一个 function 即可。这个函数定义为：`(pageName)=> newPageName`， + +加入配置如下，有一个 page 的目录名称为`login`，则`pageName='login'`，实际输出的 html 文件名称为`login++.html`。 -加入配置如下，有一个page的目录名称为`login`，则`pageName='login'`，实际输出的html文件名称为`login++.html`。 ```js -new AutoWebPlugin("./src/", { - filename: pageName => `${pageName}++` +new AutoWebPlugin('./src/', { + filename: (pageName) => `${pageName}++`, }); ``` diff --git a/demo/auto-plugin-logic-filename/dist/home++.html b/demo/auto-plugin-logic-filename/dist/home++.html index 7183b85..6421357 100644 --- a/demo/auto-plugin-logic-filename/dist/home++.html +++ b/demo/auto-plugin-logic-filename/dist/home++.html @@ -5,7 +5,7 @@ - + diff --git a/demo/auto-plugin-logic-filename/dist/home.js b/demo/auto-plugin-logic-filename/dist/home.js index be65bc0..9ffa8c4 100644 --- a/demo/auto-plugin-logic-filename/dist/home.js +++ b/demo/auto-plugin-logic-filename/dist/home.js @@ -1,80 +1,61 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__(1); - - -/***/ }), -/* 1 */ -/***/ (function(module, exports) { - -alert('page home'); - -/***/ }) -/******/ ]); \ No newline at end of file +!(function(e) { + var t = {}; + function r(n) { + if (t[n]) return t[n].exports; + var o = (t[n] = { i: n, l: !1, exports: {} }); + return e[n].call(o.exports, o, o.exports, r), (o.l = !0), o.exports; + } + (r.m = e), + (r.c = t), + (r.d = function(e, t, n) { + r.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: n }); + }), + (r.r = function(e) { + 'undefined' != typeof Symbol && + Symbol.toStringTag && + Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }), + Object.defineProperty(e, '__esModule', { value: !0 }); + }), + (r.t = function(e, t) { + if ((1 & t && (e = r(e)), 8 & t)) return e; + if (4 & t && 'object' == typeof e && e && e.__esModule) return e; + var n = Object.create(null); + if ( + (r.r(n), + Object.defineProperty(n, 'default', { enumerable: !0, value: e }), + 2 & t && 'string' != typeof e) + ) + for (var o in e) + r.d( + n, + o, + function(t) { + return e[t]; + }.bind(null, o) + ); + return n; + }), + (r.n = function(e) { + var t = + e && e.__esModule + ? function() { + return e.default; + } + : function() { + return e; + }; + return r.d(t, 'a', t), t; + }), + (r.o = function(e, t) { + return Object.prototype.hasOwnProperty.call(e, t); + }), + (r.p = ''), + r((r.s = 5)); +})({ + 4: function(e, t) { + alert('page home'); + }, + 5: function(e, t, r) { + e.exports = r(4); + }, +}); diff --git a/demo/auto-plugin-logic-filename/dist/login++.html b/demo/auto-plugin-logic-filename/dist/login++.html index 23b8409..1a57dc9 100644 --- a/demo/auto-plugin-logic-filename/dist/login++.html +++ b/demo/auto-plugin-logic-filename/dist/login++.html @@ -5,7 +5,7 @@ - + diff --git a/demo/auto-plugin-logic-filename/dist/login.js b/demo/auto-plugin-logic-filename/dist/login.js index e7beab0..dff594f 100644 --- a/demo/auto-plugin-logic-filename/dist/login.js +++ b/demo/auto-plugin-logic-filename/dist/login.js @@ -1,82 +1,63 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 2); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */, -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__(3); - - -/***/ }), -/* 3 */ -/***/ (function(module, exports) { - -alert('page login'); - -/***/ }) -/******/ ]); \ No newline at end of file +!(function(e) { + var t = {}; + function n(r) { + if (t[r]) return t[r].exports; + var o = (t[r] = { i: r, l: !1, exports: {} }); + return e[r].call(o.exports, o, o.exports, n), (o.l = !0), o.exports; + } + (n.m = e), + (n.c = t), + (n.d = function(e, t, r) { + n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }); + }), + (n.r = function(e) { + 'undefined' != typeof Symbol && + Symbol.toStringTag && + Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }), + Object.defineProperty(e, '__esModule', { value: !0 }); + }), + (n.t = function(e, t) { + if ((1 & t && (e = n(e)), 8 & t)) return e; + if (4 & t && 'object' == typeof e && e && e.__esModule) return e; + var r = Object.create(null); + if ( + (n.r(r), + Object.defineProperty(r, 'default', { enumerable: !0, value: e }), + 2 & t && 'string' != typeof e) + ) + for (var o in e) + n.d( + r, + o, + function(t) { + return e[t]; + }.bind(null, o) + ); + return r; + }), + (n.n = function(e) { + var t = + e && e.__esModule + ? function() { + return e.default; + } + : function() { + return e; + }; + return n.d(t, 'a', t), t; + }), + (n.o = function(e, t) { + return Object.prototype.hasOwnProperty.call(e, t); + }), + (n.p = ''), + n((n.s = 3)); +})([ + , + , + function(e, t) { + alert('page login'); + }, + function(e, t, n) { + e.exports = n(2); + }, +]); diff --git a/demo/auto-plugin-logic-filename/dist/signup++.html b/demo/auto-plugin-logic-filename/dist/signup++.html index 8dd84e3..6407fd1 100644 --- a/demo/auto-plugin-logic-filename/dist/signup++.html +++ b/demo/auto-plugin-logic-filename/dist/signup++.html @@ -5,7 +5,7 @@ - + diff --git a/demo/auto-plugin-logic-filename/dist/signup.js b/demo/auto-plugin-logic-filename/dist/signup.js index 979b944..0c220d8 100644 --- a/demo/auto-plugin-logic-filename/dist/signup.js +++ b/demo/auto-plugin-logic-filename/dist/signup.js @@ -1,83 +1,61 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 4); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ 4: -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__(5); - - -/***/ }), - -/***/ 5: -/***/ (function(module, exports) { - -alert('page signup'); - -/***/ }) - -/******/ }); \ No newline at end of file +!(function(e) { + var t = {}; + function n(r) { + if (t[r]) return t[r].exports; + var o = (t[r] = { i: r, l: !1, exports: {} }); + return e[r].call(o.exports, o, o.exports, n), (o.l = !0), o.exports; + } + (n.m = e), + (n.c = t), + (n.d = function(e, t, r) { + n.o(e, t) || Object.defineProperty(e, t, { enumerable: !0, get: r }); + }), + (n.r = function(e) { + 'undefined' != typeof Symbol && + Symbol.toStringTag && + Object.defineProperty(e, Symbol.toStringTag, { value: 'Module' }), + Object.defineProperty(e, '__esModule', { value: !0 }); + }), + (n.t = function(e, t) { + if ((1 & t && (e = n(e)), 8 & t)) return e; + if (4 & t && 'object' == typeof e && e && e.__esModule) return e; + var r = Object.create(null); + if ( + (n.r(r), + Object.defineProperty(r, 'default', { enumerable: !0, value: e }), + 2 & t && 'string' != typeof e) + ) + for (var o in e) + n.d( + r, + o, + function(t) { + return e[t]; + }.bind(null, o) + ); + return r; + }), + (n.n = function(e) { + var t = + e && e.__esModule + ? function() { + return e.default; + } + : function() { + return e; + }; + return n.d(t, 'a', t), t; + }), + (n.o = function(e, t) { + return Object.prototype.hasOwnProperty.call(e, t); + }), + (n.p = ''), + n((n.s = 1)); +})([ + function(e, t) { + alert('page signup'); + }, + function(e, t, n) { + e.exports = n(0); + }, +]); diff --git a/demo/auto-plugin-logic-filename/src/home/index.js b/demo/auto-plugin-logic-filename/src/home/index.js index 05e5ce0..b2a7b18 100644 --- a/demo/auto-plugin-logic-filename/src/home/index.js +++ b/demo/auto-plugin-logic-filename/src/home/index.js @@ -1 +1 @@ -alert('page home'); \ No newline at end of file +alert('page home'); diff --git a/demo/auto-plugin-logic-filename/src/login/index.js b/demo/auto-plugin-logic-filename/src/login/index.js index a5e1716..b930b26 100644 --- a/demo/auto-plugin-logic-filename/src/login/index.js +++ b/demo/auto-plugin-logic-filename/src/login/index.js @@ -1 +1 @@ -alert('page login'); \ No newline at end of file +alert('page login'); diff --git a/demo/auto-plugin-logic-filename/src/signup/index.js b/demo/auto-plugin-logic-filename/src/signup/index.js index c042478..40a4b96 100644 --- a/demo/auto-plugin-logic-filename/src/signup/index.js +++ b/demo/auto-plugin-logic-filename/src/signup/index.js @@ -1 +1 @@ -alert('page signup'); \ No newline at end of file +alert('page signup'); diff --git a/demo/auto-plugin-logic-filename/webpack.config.js b/demo/auto-plugin-logic-filename/webpack.config.js index faf25fe..e10fc84 100644 --- a/demo/auto-plugin-logic-filename/webpack.config.js +++ b/demo/auto-plugin-logic-filename/webpack.config.js @@ -1,15 +1,15 @@ -const path = require("path"); -const {AutoWebPlugin} = require("../../index"); +const path = require('path'); +const { AutoWebPlugin } = require('../../index'); -const autoPlugin = new AutoWebPlugin("./src/", { - filename: pageName => `${pageName}++`, +const autoPlugin = new AutoWebPlugin('./src/', { + filename: (pageName) => `${pageName}++`, }); module.exports = { entry: autoPlugin.entry(), output: { - path: path.resolve(__dirname, "dist"), - filename: "[name].js" + path: path.resolve(__dirname, 'dist'), + filename: '[name].js', }, - plugins: [autoPlugin] + plugins: [autoPlugin], }; diff --git a/demo/auto-plugin/README.md b/demo/auto-plugin/README.md index 41dd0af..8932ea1 100644 --- a/demo/auto-plugin/README.md +++ b/demo/auto-plugin/README.md @@ -1,24 +1,66 @@ # 管理多个单页应用 + `AutoWebPlugin` 可以自动管理多个单页应用。简单使用如下 + ```js - new AutoWebPlugin('./src/', { - ignorePages: ['ignore'], - template: './src/template.html', - commonsChunk: { - name: 'common',// name prop is require - minChunks: 2, - }, - outputPagemap: true, - }) +const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const { AutoWebPlugin } = require('../../index'); + +const autoWebPlugin = new AutoWebPlugin('./src/', { + ignorePages: ['ignore'], + template: './src/template.html', + outputPagemap: true, +}); + +module.exports = { + output: { + path: path.resolve(__dirname, 'dist'), + filename: '[name].js', + publicPath: 'https://cdn.cn/', + }, + entry: autoWebPlugin.entry({ + ie_polyfill: './src/ie_polyfill', + polyfill: './src/polyfill', + }), + optimization: { + splitChunks: { + minSize: 0, + cacheGroups: { + commons: { + chunks: 'initial', + name: 'common', + minChunks: 2, + }, + }, + }, + }, + module: { + rules: [ + { + test: /\.css$/, + loader: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: '[name].css', + }), + autoWebPlugin, + ], +}; ``` -以上配置会让`AutoWebPlugin`找出`./src/`目录下的所有目录，为每个目录生产一个HTML作为单页应用的入口。 -- `ignorePages` 属性用了忽略名叫`ignore`的目录，不为这个目录生产HTML入口 -- `template` 属性指出所有单页应用生产HTML入口时公用的HTML模版，模版语法和`WebPlugin`里一致。 -- `commonsChunk` 属性用来为`AutoWebPlugin`找出的所有单页应用抽离公共代码，用webpack自带的`CommonsChunkPlugin`实现。`commonsChunk`的配置属性和`CommonsChunkPlugin`一样。 -- `outputPagemap` 属性用来输出一个叫`pagemap.json`的文件，里面存放了`AutoWebPlugin`找出的所有单页应用的名称和URL的映射关系。 + +以上配置会让`AutoWebPlugin`找出`./src/`目录下的所有目录，为每个目录生产一个 HTML 作为单页应用的入口。 + +* `ignorePages` 属性用了忽略名叫`ignore`的目录，不为这个目录生产 HTML 入口 +* `template` 属性指出所有单页应用生产 HTML 入口时公用的 HTML 模版，模版语法和`WebPlugin`里一致。 +* `outputPagemap` 属性用来输出一个叫`pagemap.json`的文件，里面存放了`AutoWebPlugin`找出的所有单页应用的名称和 URL 的映射关系。 `AutoWebPlugin`还支持很多配置选项，你可以[在这里看到](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/lib/AutoWebPlugin.js#L33)。 更多关于`AutoWebPlugin`的资料可以参考以下文章： -- [webpack原理与实战](https://github.com/gwuhaolin/blog/issues/4) -- [webpack2 终极优化](https://github.com/gwuhaolin/blog/issues/2) \ No newline at end of file + +* [webpack 原理与实战](https://github.com/gwuhaolin/blog/issues/4) +* [webpack2 终极优化](https://github.com/gwuhaolin/blog/issues/2) diff --git a/demo/auto-plugin/dist-js-prod/common.css b/demo/auto-plugin/dist-js-prod/common.css new file mode 100644 index 0000000..d2dfe5c --- /dev/null +++ b/demo/auto-plugin/dist-js-prod/common.css @@ -0,0 +1,4 @@ +body { + color: red; +} + diff --git a/demo/auto-plugin/dist-js-prod/common.js b/demo/auto-plugin/dist-js-prod/common.js index 644f94d..8e59f55 100644 --- a/demo/auto-plugin/dist-js-prod/common.js +++ b/demo/auto-plugin/dist-js-prod/common.js @@ -1 +1 @@ -!function(t){function e(n){if(r[n])return r[n].exports;var o=r[n]={i:n,l:!1,exports:{}};return t[n].call(o.exports,o,o.exports,e),o.l=!0,o.exports}var n=window.webpackJsonp;window.webpackJsonp=function(r,i,s){for(var a,u,f,c=0,l=[];c=0&&g.splice(e,1)}function a(t){var e=document.createElement("style");return t.attrs.type="text/css",f(e,t.attrs),i(t,e),e}function u(t){var e=document.createElement("link");return t.attrs.type="text/css",t.attrs.rel="stylesheet",f(e,t.attrs),i(t,e),e}function f(t,e){Object.keys(e).forEach(function(n){t.setAttribute(n,e[n])})}function c(t,e){var n,r,o,i;if(e.transform&&t.css){if(!(i=e.transform(t.css)))return function(){};t.css=i}if(e.singleton){var f=y++;n=m||(m=a(e)),r=l.bind(null,n,f,!1),o=l.bind(null,n,f,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=u(e),r=d.bind(null,n,e),o=function(){s(n),n.href&&URL.revokeObjectURL(n.href)}):(n=a(e),r=p.bind(null,n),o=function(){s(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}function l(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=x(e,o);else{var i=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(i,s[e]):t.appendChild(i)}}function p(t,e){var n=e.css,r=e.media;if(r&&t.setAttribute("media",r),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}function d(t,e,n){var r=n.css,o=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||i)&&(r=w(r)),o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([r],{type:"text/css"}),a=t.href;t.href=URL.createObjectURL(s),a&&URL.revokeObjectURL(a)}var h={},v=function(t){var e;return function(){return void 0===e&&(e=t.apply(this,arguments)),e}}(function(){return window&&document&&document.all&&!window.atob}),b=function(t){var e={};return function(n){if(void 0===e[n]){var r=t.call(this,n);if(r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}e[n]=r}return e[n]}}(function(t){return document.querySelector(t)}),m=null,y=0,g=[],w=n(3);t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");e=e||{},e.attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=v()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=o(t,e);return r(n,e),function(t){for(var i=[],s=0;s \ No newline at end of file + + + + + + + + + + + + + + + + + + + + diff --git a/demo/auto-plugin/dist-js-prod/home.js b/demo/auto-plugin/dist-js-prod/home.js index 0ea1148..27660d9 100644 --- a/demo/auto-plugin/dist-js-prod/home.js +++ b/demo/auto-plugin/dist-js-prod/home.js @@ -1 +1 @@ -webpackJsonp([2],[function(n,o,e){n.exports=e(1)},function(n,o,e){e(2),alert("page home")},function(n,o){}],[0]); \ No newline at end of file +!function(e){function n(n){for(var r,f,i=n[0],l=n[1],c=n[2],a=0,s=[];a \ No newline at end of file + + + + + + + + + + + + + + + + + + + + diff --git a/demo/auto-plugin/dist-js-prod/login.js b/demo/auto-plugin/dist-js-prod/login.js index 5f8839e..33cf076 100644 --- a/demo/auto-plugin/dist-js-prod/login.js +++ b/demo/auto-plugin/dist-js-prod/login.js @@ -1 +1 @@ -webpackJsonp([1],[,,,,function(n,o,t){n.exports=t(5)},function(n,o,t){t(6),alert("page login")},function(n,o){}],[4]); \ No newline at end of file +!function(e){function n(n){for(var r,i,f=n[0],l=n[1],c=n[2],a=0,s=[];a \ No newline at end of file + + + + + + + + + + + + + + + + + + + + diff --git a/demo/auto-plugin/dist-js-prod/signup.js b/demo/auto-plugin/dist-js-prod/signup.js index 3c8d0ac..127623e 100644 --- a/demo/auto-plugin/dist-js-prod/signup.js +++ b/demo/auto-plugin/dist-js-prod/signup.js @@ -1 +1 @@ -webpackJsonp([0],{7:function(n,o,p){n.exports=p(8)},8:function(n,o,p){p(9),alert("page signup")},9:function(n,o){}},[7]); \ No newline at end of file +!function(e){function n(n){for(var r,i,f=n[0],l=n[1],p=n[2],a=0,s=[];a - // tags it will allow on a page - if (!options.singleton && typeof options.singleton !== "boolean") options.singleton = isOldIE(); - - // By default, add + background-color: rebeccapurple; +} + diff --git a/demo/config-html-attribute/google-analyze.js b/demo/config-html-attribute/google-analyze.js index 8a88559..975d1b1 100644 --- a/demo/config-html-attribute/google-analyze.js +++ b/demo/config-html-attribute/google-analyze.js @@ -1 +1 @@ -console.log('GA'); \ No newline at end of file +console.log('GA'); diff --git a/demo/config-html-attribute/reset.min.css b/demo/config-html-attribute/reset.min.css index 7cf2d40..d59099d 100644 --- a/demo/config-html-attribute/reset.min.css +++ b/demo/config-html-attribute/reset.min.css @@ -1,3 +1,3 @@ body { - background-color: rebeccapurple; -} \ No newline at end of file + background-color: rebeccapurple; +} diff --git a/demo/config-html-attribute/webpack.config.js b/demo/config-html-attribute/webpack.config.js index 81ee923..93a3bb3 100644 --- a/demo/config-html-attribute/webpack.config.js +++ b/demo/config-html-attribute/webpack.config.js @@ -16,5 +16,5 @@ module.exports = { template: './template.html', requires: ['A', 'B'], }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/config-resource/README.md b/demo/config-resource/README.md index 0bad7cc..cbcc781 100644 --- a/demo/config-resource/README.md +++ b/demo/config-resource/README.md @@ -1,35 +1,40 @@ -# 在webpack里直接通过JS配置资源注入到HTML -通过配置webpack的entry，webpack为我们生产了一系列chunk。但是我们需要把这些chunk注入到HTML里才可以在浏览器里运行起来。 -`WebPlugin`可以方便的帮你把chunk注入到HTML里。 +# 在 webpack 里直接通过 JS 配置资源注入到 HTML + +通过配置 webpack 的 entry，webpack 为我们生产了一系列 chunk。但是我们需要把这些 chunk 注入到 HTML 里才可以在浏览器里运行起来。 +`WebPlugin`可以方便的帮你把 chunk 注入到 HTML 里。 + ```js - new WebPlugin({ - filename: 'index.html', - requires: { - 'ie-polyfill': { - _ie: true - }, - 'inline': { - _inline: true, - _dist: true - }, - 'dev': { - _dev: true - }, - //load a local google analyze file direct without local var webpack - './google-analytics.js': { - _dist: true - } - } - }) +new WebPlugin({ + filename: 'index.html', + requires: { + 'ie-polyfill': { + _ie: true, + }, + inline: { + _inline: true, + _dist: true, + }, + dev: { + _dev: true, + }, + //load a local google analyze file direct without local var webpack + './google-analytics.js': { + _dist: true, + }, + }, +}); ``` -通过`requires`属性可以配置chunk注入到HTML里的方式。`requires`的值可以是一个数组或是一个object。 -- 为数组时，数组里的每一项都是chunk的名称。 -- 为object时，可以配置每个chunk的注入方式 + +通过`requires`属性可以配置 chunk 注入到 HTML 里的方式。`requires`的值可以是一个数组或是一个 object。 + +* 为数组时，数组里的每一项都是 chunk 的名称。 +* 为 object 时，可以配置每个 chunk 的注入方式 支持以下注入方式 -- `_dist` 只有在生产环境下才引入该资源 -- `_dev` 只有在开发环境下才引入该资源 -- `_inline` 把该资源的内容潜入到html里 -- `_ie` 只有IE浏览器才需要引入的资源，通过 `[if IE]>resourceresource \ No newline at end of file + \ No newline at end of file diff --git a/demo/config-resource/dist-js-prod/inline.js b/demo/config-resource/dist-js-prod/inline.js index 78a6eb6..14f747e 100644 --- a/demo/config-resource/dist-js-prod/inline.js +++ b/demo/config-resource/dist-js-prod/inline.js @@ -1 +1 @@ -!function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=1)}([,function(t,n){alert("this script will be inject into html inline")}]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}({2:function(e,t){alert("this script will be inject into html inline")}}); \ No newline at end of file diff --git a/demo/config-resource/dist-js/dev.js b/demo/config-resource/dist-js/dev.js index d273b8d..32f0a5a 100644 --- a/demo/config-resource/dist-js/dev.js +++ b/demo/config-resource/dist-js/dev.js @@ -1,75 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 2); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ 2: -/***/ (function(module, exports) { - -alert('this script will only load in dev mode'); - -/***/ }) - -/******/ }); \ No newline at end of file +!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([,function(e,t){alert("this script will only load in dev mode")}]); \ No newline at end of file diff --git a/demo/config-resource/dist-js/googleAnalytics.js b/demo/config-resource/dist-js/googleAnalytics.js index 810939d..c1ae361 100644 --- a/demo/config-resource/dist-js/googleAnalytics.js +++ b/demo/config-resource/dist-js/googleAnalytics.js @@ -1,75 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 3); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ 3: -/***/ (function(module, exports) { - -console.log('GA'); - -/***/ }) - -/******/ }); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("GA")}]); \ No newline at end of file diff --git a/demo/config-resource/dist-js/ie-polyfill.js b/demo/config-resource/dist-js/ie-polyfill.js index faa0878..42a6806 100644 --- a/demo/config-resource/dist-js/ie-polyfill.js +++ b/demo/config-resource/dist-js/ie-polyfill.js @@ -1,73 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports) { - -alert('only IE will load this script'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=3)}({3:function(e,t){alert("only IE will load this script")}}); \ No newline at end of file diff --git a/demo/config-resource/dist-js/inline.js b/demo/config-resource/dist-js/inline.js index a4c85f8..14f747e 100644 --- a/demo/config-resource/dist-js/inline.js +++ b/demo/config-resource/dist-js/inline.js @@ -1,74 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 1); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */ -/***/ (function(module, exports) { - -alert('this script will be inject into html inline'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}({2:function(e,t){alert("this script will be inject into html inline")}}); \ No newline at end of file diff --git a/demo/config-resource/dist-template/dev.js b/demo/config-resource/dist-template/dev.js index d273b8d..32f0a5a 100644 --- a/demo/config-resource/dist-template/dev.js +++ b/demo/config-resource/dist-template/dev.js @@ -1,75 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 2); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ 2: -/***/ (function(module, exports) { - -alert('this script will only load in dev mode'); - -/***/ }) - -/******/ }); \ No newline at end of file +!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([,function(e,t){alert("this script will only load in dev mode")}]); \ No newline at end of file diff --git a/demo/config-resource/dist-template/googleAnalytics.js b/demo/config-resource/dist-template/googleAnalytics.js index 810939d..c1ae361 100644 --- a/demo/config-resource/dist-template/googleAnalytics.js +++ b/demo/config-resource/dist-template/googleAnalytics.js @@ -1,75 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 3); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ 3: -/***/ (function(module, exports) { - -console.log('GA'); - -/***/ }) - -/******/ }); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("GA")}]); \ No newline at end of file diff --git a/demo/config-resource/dist-template/ie-polyfill.js b/demo/config-resource/dist-template/ie-polyfill.js index faa0878..42a6806 100644 --- a/demo/config-resource/dist-template/ie-polyfill.js +++ b/demo/config-resource/dist-template/ie-polyfill.js @@ -1,73 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports) { - -alert('only IE will load this script'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=3)}({3:function(e,t){alert("only IE will load this script")}}); \ No newline at end of file diff --git a/demo/config-resource/dist-template/index.html b/demo/config-resource/dist-template/index.html index decd46c..69a92c3 100644 --- a/demo/config-resource/dist-template/index.html +++ b/demo/config-resource/dist-template/index.html @@ -3,80 +3,7 @@ - + diff --git a/demo/config-resource/dist-template/inline.js b/demo/config-resource/dist-template/inline.js index a4c85f8..14f747e 100644 --- a/demo/config-resource/dist-template/inline.js +++ b/demo/config-resource/dist-template/inline.js @@ -1,74 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 1); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */ -/***/ (function(module, exports) { - -alert('this script will be inject into html inline'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}({2:function(e,t){alert("this script will be inject into html inline")}}); \ No newline at end of file diff --git a/demo/config-resource/google-analytics.js b/demo/config-resource/google-analytics.js index 8a88559..975d1b1 100644 --- a/demo/config-resource/google-analytics.js +++ b/demo/config-resource/google-analytics.js @@ -1 +1 @@ -console.log('GA'); \ No newline at end of file +console.log('GA'); diff --git a/demo/config-resource/ie-polyfill.js b/demo/config-resource/ie-polyfill.js index 6149004..887a618 100644 --- a/demo/config-resource/ie-polyfill.js +++ b/demo/config-resource/ie-polyfill.js @@ -1 +1 @@ -alert('only IE will load this script'); \ No newline at end of file +alert('only IE will load this script'); diff --git a/demo/config-resource/inline.js b/demo/config-resource/inline.js index 1b0c035..b4121c3 100644 --- a/demo/config-resource/inline.js +++ b/demo/config-resource/inline.js @@ -1 +1 @@ -alert('this script will be inject into html inline'); \ No newline at end of file +alert('this script will be inject into html inline'); diff --git a/demo/config-resource/webpack.config-template.js b/demo/config-resource/webpack.config-template.js index 96ec880..419de94 100644 --- a/demo/config-resource/webpack.config-template.js +++ b/demo/config-resource/webpack.config-template.js @@ -15,7 +15,7 @@ module.exports = { plugins: [ new WebPlugin({ filename: 'index.html', - template: './template.html' + template: './template.html', }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/config-resource/webpack.config.js b/demo/config-resource/webpack.config.js index 819b263..68c3ca7 100644 --- a/demo/config-resource/webpack.config.js +++ b/demo/config-resource/webpack.config.js @@ -18,20 +18,20 @@ module.exports = { requires: { 'ie-polyfill': { _ie: true, - crossorigin: 'anonymous' + crossorigin: 'anonymous', }, - 'inline': { + inline: { _inline: true, - _dist: true + _dist: true, }, - 'dev': { - _dev: true + dev: { + _dev: true, }, //load a local google analyze file direct without local var webpack './google-analytics.js': { - _dist: true - } - } + _dist: true, + }, + }, }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/extract-css/1.css b/demo/extract-css/1.css index 4b91dc9..11505b6 100644 --- a/demo/extract-css/1.css +++ b/demo/extract-css/1.css @@ -1,4 +1,4 @@ /*1.css*/ body { font-size: 50px; -} \ No newline at end of file +} diff --git a/demo/extract-css/1.js b/demo/extract-css/1.js index 36f6337..610c438 100644 --- a/demo/extract-css/1.js +++ b/demo/extract-css/1.js @@ -1,2 +1,2 @@ require('./1.css'); -console.log('module 1'); \ No newline at end of file +console.log('module 1'); diff --git a/demo/extract-css/2.css b/demo/extract-css/2.css index 9b1c1e5..5a5fb5e 100644 --- a/demo/extract-css/2.css +++ b/demo/extract-css/2.css @@ -1,4 +1,4 @@ /*2.css*/ body { background-color: rebeccapurple; -} \ No newline at end of file +} diff --git a/demo/extract-css/2.js b/demo/extract-css/2.js index ab7b35f..358b043 100644 --- a/demo/extract-css/2.js +++ b/demo/extract-css/2.js @@ -1,2 +1,2 @@ require('./2.css'); -console.log('module 2'); \ No newline at end of file +console.log('module 2'); diff --git a/demo/extract-css/3.css b/demo/extract-css/3.css index 4b3ed25..0e8bed0 100644 --- a/demo/extract-css/3.css +++ b/demo/extract-css/3.css @@ -1,4 +1,4 @@ /*3.css*/ body { color: aqua; -} \ No newline at end of file +} diff --git a/demo/extract-css/3.js b/demo/extract-css/3.js index a95ef3f..214c7db 100644 --- a/demo/extract-css/3.js +++ b/demo/extract-css/3.js @@ -1,2 +1,2 @@ require('./3.css'); -console.log('module 3'); \ No newline at end of file +console.log('module 3'); diff --git a/demo/extract-css/4.css b/demo/extract-css/4.css index 5d4e11b..875b7bf 100644 --- a/demo/extract-css/4.css +++ b/demo/extract-css/4.css @@ -1,4 +1,4 @@ /*4.css*/ body { border: 10px solid black; -} \ No newline at end of file +} diff --git a/demo/extract-css/4.js b/demo/extract-css/4.js index 1ecf83d..9cb0783 100644 --- a/demo/extract-css/4.js +++ b/demo/extract-css/4.js @@ -1,2 +1,2 @@ require('./4.css'); -console.log('module 4'); \ No newline at end of file +console.log('module 4'); diff --git a/demo/extract-css/README.md b/demo/extract-css/README.md index 9113220..ae15f9e 100644 --- a/demo/extract-css/README.md +++ b/demo/extract-css/README.md @@ -1,36 +1,48 @@ -# 从JS中提取出CSS -有些时候webpack生产的chunk里包含了一些CSS代码，这些代码会通过JS注入到HTML HEAD里来加载。如果你想把JS里的CSS提取出来你可以使用`extract-text-webpack-plugin`插件提取。 -提取后这个chunk会输出2个文件，一个是纯JS，一个是纯CSS。 -这种情况下在使用`WebPlugin`时，你需要把提取出的CSS注入进去，如下： -webpack配置： +# 从 JS 中提取出 CSS + +有些时候 webpack 生产的 chunk 里包含了一些 CSS 代码，这些代码会通过 JS 注入到 HTML HEAD 里来加载。如果你想把 JS 里的 CSS 提取出来你可以使用`extract-text-webpack-plugin`插件提取。提取后这个 chunk 会输出 2 个文件，一个是纯 JS，一个是纯 CSS。这种情况下在使用`WebPlugin`时，你需要把提取出的 CSS 注入进去，如下： +webpack 配置： + ```js - module: { - loaders: [ - { - test: /\.css$/, - loader: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: 'css-loader' - }) - } - ] - }, - entry: { - 1: './1', - 2: './2', - 3: './3', - 4: './4', - }, - plugins: [ - new ExtractTextPlugin('[name].css'), - new WebPlugin({ - filename: 'index.html', - template: './template.html', - requires: ['1', '2', '3', '4'] - }), - ] +const path = require('path'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); +const { WebPlugin } = require('../../index'); + +module.exports = { + output: { + path: path.resolve(__dirname, 'dist'), + filename: '[name].js', + }, + module: { + rules: [ + { + test: /\.css$/, + loader: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], + }, + entry: { + 1: './1', + 2: './2', + 3: './3', + 4: './4', + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: '[name].css', + }), + new WebPlugin({ + filename: 'index.html', + template: './template.html', + requires: ['1', '2', '3', '4'], + }), + ], + mode: 'development', +}; ``` -这样webpack会生成4个名叫 1, 2, 3, 4 的chunk，并且他们里面的CSS都被提取出来了。所以在HTML模版中你需要这样注入提取的CSS + +这样 webpack 会生成 4 个名叫 1, 2, 3, 4 的 chunk，并且他们里面的 CSS 都被提取出来了。所以在 HTML 模版中你需要这样注入提取的 CSS + ```html @@ -48,4 +60,4 @@ webpack配置：
footer
-``` \ No newline at end of file +``` diff --git a/demo/extract-css/dist/1.css b/demo/extract-css/dist/1.css index 4b91dc9..8618e36 100644 --- a/demo/extract-css/dist/1.css +++ b/demo/extract-css/dist/1.css @@ -1,4 +1,5 @@ /*1.css*/ body { font-size: 50px; -} \ No newline at end of file +} + diff --git a/demo/extract-css/dist/1.js b/demo/extract-css/dist/1.js index cc320ad..5ccc941 100644 --- a/demo/extract-css/dist/1.js +++ b/demo/extract-css/dist/1.js @@ -36,14 +36,34 @@ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? @@ -59,22 +79,33 @@ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ +/******/ /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); +/******/ return __webpack_require__(__webpack_require__.s = "./1.js"); /******/ }) /************************************************************************/ -/******/ ([ -/* 0 */ +/******/ ({ + +/***/ "./1.css": +/*!***************!*\ + !*** ./1.css ***! + \***************/ +/*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { -__webpack_require__(1); -console.log('module 1'); +eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./1.css?"); /***/ }), -/* 1 */ -/***/ (function(module, exports) { -// removed by extract-text-webpack-plugin +/***/ "./1.js": +/*!**************!*\ + !*** ./1.js ***! + \**************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +eval("__webpack_require__(/*! ./1.css */ \"./1.css\");\nconsole.log('module 1');\n\n\n//# sourceURL=webpack:///./1.js?"); /***/ }) -/******/ ]); \ No newline at end of file + +/******/ }); \ No newline at end of file diff --git a/demo/extract-css/dist/2.css b/demo/extract-css/dist/2.css index 9b1c1e5..d852ccd 100644 --- a/demo/extract-css/dist/2.css +++ b/demo/extract-css/dist/2.css @@ -1,4 +1,5 @@ /*2.css*/ body { background-color: rebeccapurple; -} \ No newline at end of file +} + diff --git a/demo/extract-css/dist/2.js b/demo/extract-css/dist/2.js index c5f74b9..cffecbf 100644 --- a/demo/extract-css/dist/2.js +++ b/demo/extract-css/dist/2.js @@ -36,14 +36,34 @@ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? @@ -59,24 +79,33 @@ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ +/******/ /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 2); +/******/ return __webpack_require__(__webpack_require__.s = "./2.js"); /******/ }) /************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */, -/* 2 */ +/******/ ({ + +/***/ "./2.css": +/*!***************!*\ + !*** ./2.css ***! + \***************/ +/*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { -__webpack_require__(3); -console.log('module 2'); +eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./2.css?"); /***/ }), -/* 3 */ -/***/ (function(module, exports) { -// removed by extract-text-webpack-plugin +/***/ "./2.js": +/*!**************!*\ + !*** ./2.js ***! + \**************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +eval("__webpack_require__(/*! ./2.css */ \"./2.css\");\nconsole.log('module 2');\n\n\n//# sourceURL=webpack:///./2.js?"); /***/ }) -/******/ ]); \ No newline at end of file + +/******/ }); \ No newline at end of file diff --git a/demo/extract-css/dist/3.css b/demo/extract-css/dist/3.css index 4b3ed25..e0903c7 100644 --- a/demo/extract-css/dist/3.css +++ b/demo/extract-css/dist/3.css @@ -1,4 +1,5 @@ /*3.css*/ body { color: aqua; -} \ No newline at end of file +} + diff --git a/demo/extract-css/dist/3.js b/demo/extract-css/dist/3.js index eab05d8..6481ec4 100644 --- a/demo/extract-css/dist/3.js +++ b/demo/extract-css/dist/3.js @@ -36,14 +36,34 @@ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? @@ -59,24 +79,32 @@ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ +/******/ /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 4); +/******/ return __webpack_require__(__webpack_require__.s = "./3.js"); /******/ }) /************************************************************************/ /******/ ({ -/***/ 4: +/***/ "./3.css": +/*!***************!*\ + !*** ./3.css ***! + \***************/ +/*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { -__webpack_require__(5); -console.log('module 3'); +eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./3.css?"); /***/ }), -/***/ 5: -/***/ (function(module, exports) { +/***/ "./3.js": +/*!**************!*\ + !*** ./3.js ***! + \**************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { -// removed by extract-text-webpack-plugin +eval("__webpack_require__(/*! ./3.css */ \"./3.css\");\nconsole.log('module 3');\n\n\n//# sourceURL=webpack:///./3.js?"); /***/ }) diff --git a/demo/extract-css/dist/4.css b/demo/extract-css/dist/4.css index 5d4e11b..c2ce13e 100644 --- a/demo/extract-css/dist/4.css +++ b/demo/extract-css/dist/4.css @@ -1,4 +1,5 @@ /*4.css*/ body { border: 10px solid black; -} \ No newline at end of file +} + diff --git a/demo/extract-css/dist/4.js b/demo/extract-css/dist/4.js index d1b2458..28d3127 100644 --- a/demo/extract-css/dist/4.js +++ b/demo/extract-css/dist/4.js @@ -36,14 +36,34 @@ /******/ // define getter function for harmony exports /******/ __webpack_require__.d = function(exports, name, getter) { /******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); +/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter }); /******/ } /******/ }; /******/ +/******/ // define __esModule on exports +/******/ __webpack_require__.r = function(exports) { +/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) { +/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' }); +/******/ } +/******/ Object.defineProperty(exports, '__esModule', { value: true }); +/******/ }; +/******/ +/******/ // create a fake namespace object +/******/ // mode & 1: value is a module id, require it +/******/ // mode & 2: merge all properties of value into the ns +/******/ // mode & 4: return value when already ns object +/******/ // mode & 8|1: behave like require +/******/ __webpack_require__.t = function(value, mode) { +/******/ if(mode & 1) value = __webpack_require__(value); +/******/ if(mode & 8) return value; +/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value; +/******/ var ns = Object.create(null); +/******/ __webpack_require__.r(ns); +/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value }); +/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key)); +/******/ return ns; +/******/ }; +/******/ /******/ // getDefaultExport function for compatibility with non-harmony modules /******/ __webpack_require__.n = function(module) { /******/ var getter = module && module.__esModule ? @@ -59,24 +79,32 @@ /******/ // __webpack_public_path__ /******/ __webpack_require__.p = ""; /******/ +/******/ /******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 6); +/******/ return __webpack_require__(__webpack_require__.s = "./4.js"); /******/ }) /************************************************************************/ /******/ ({ -/***/ 6: +/***/ "./4.css": +/*!***************!*\ + !*** ./4.css ***! + \***************/ +/*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { -__webpack_require__(7); -console.log('module 4'); +eval("// extracted by mini-css-extract-plugin\n\n//# sourceURL=webpack:///./4.css?"); /***/ }), -/***/ 7: -/***/ (function(module, exports) { +/***/ "./4.js": +/*!**************!*\ + !*** ./4.js ***! + \**************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { -// removed by extract-text-webpack-plugin +eval("__webpack_require__(/*! ./4.css */ \"./4.css\");\nconsole.log('module 4');\n\n\n//# sourceURL=webpack:///./4.js?"); /***/ }) diff --git a/demo/extract-css/dist/index.html b/demo/extract-css/dist/index.html index 73523ad..2ece21d 100644 --- a/demo/extract-css/dist/index.html +++ b/demo/extract-css/dist/index.html @@ -7,7 +7,9 @@ +} + + diff --git a/demo/extract-css/webpack.config.js b/demo/extract-css/webpack.config.js index 2d79a64..633b58c 100644 --- a/demo/extract-css/webpack.config.js +++ b/demo/extract-css/webpack.config.js @@ -1,5 +1,5 @@ const path = require('path'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { WebPlugin } = require('../../index'); module.exports = { @@ -8,15 +8,12 @@ module.exports = { filename: '[name].js', }, module: { - loaders: [ + rules: [ { test: /\.css$/, - loader: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: 'css-loader' - }) - } - ] + loader: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], }, entry: { 1: './1', @@ -25,11 +22,14 @@ module.exports = { 4: './4', }, plugins: [ - new ExtractTextPlugin('[name].css'), + new MiniCssExtractPlugin({ + filename: '[name].css', + }), new WebPlugin({ filename: 'index.html', template: './template.html', - requires: ['1', '2', '3', '4'] + requires: ['1', '2', '3', '4'], }), - ] -}; \ No newline at end of file + ], + mode: 'development', +}; diff --git a/demo/hmr/a/index.css b/demo/hmr/a/index.css index 1245138..4c8aad5 100644 --- a/demo/hmr/a/index.css +++ b/demo/hmr/a/index.css @@ -2,4 +2,4 @@ body { text-align: center; color: lawngreen; background-color: black; -} \ No newline at end of file +} diff --git a/demo/hmr/a/index.js b/demo/hmr/a/index.js index 4fe0bcb..70c1834 100644 --- a/demo/hmr/a/index.js +++ b/demo/hmr/a/index.js @@ -1,4 +1,4 @@ let app = window.document.getElementById('app'); app.innerHTML = 'hello A '; require('./index.css'); -module.hot.accept(); \ No newline at end of file +module.hot.accept(); diff --git a/demo/hmr/dist/a.js b/demo/hmr/dist/a.js index 0ad98e4..05ed27a 100644 --- a/demo/hmr/dist/a.js +++ b/demo/hmr/dist/a.js @@ -1,5 +1,6 @@ /******/ -(function (modules) { // webpackBootstrap +(function(modules) { + // webpackBootstrap /******/ function hotDisposeChunk(chunkId) { /******/ @@ -8,10 +9,13 @@ } /******/ - var parentHotUpdateCallback = this["webpackHotUpdate"]; + var parentHotUpdateCallback = this['webpackHotUpdate']; /******/ - this["webpackHotUpdate"] = - /******/ function webpackHotUpdateCallback(chunkId, moreModules) { // eslint-disable-line no-unused-vars + this['webpackHotUpdate'] = /******/ function webpackHotUpdateCallback( + chunkId, + moreModules + ) { + // eslint-disable-line no-unused-vars /******/ hotAddUpdateChunk(chunkId, moreModules); /******/ @@ -21,17 +25,24 @@ /******/ /******/ - function hotDownloadUpdateChunk(chunkId) { // eslint-disable-line no-unused-vars + function hotDownloadUpdateChunk(chunkId) { + // eslint-disable-line no-unused-vars /******/ - var head = document.getElementsByTagName("head")[0]; + var head = document.getElementsByTagName('head')[0]; /******/ - var script = document.createElement("script"); + var script = document.createElement('script'); /******/ - script.type = "text/javascript"; + script.type = 'text/javascript'; /******/ - script.charset = "utf-8"; + script.charset = 'utf-8'; /******/ - script.src = __webpack_require__.p + "" + chunkId + "." + hotCurrentHash + ".hot-update.js"; + script.src = + __webpack_require__.p + + '' + + chunkId + + '.' + + hotCurrentHash + + '.hot-update.js'; /******/ head.appendChild(script); /******/ @@ -40,20 +51,22 @@ /******/ /******/ - function hotDownloadManifest() { // eslint-disable-line no-unused-vars + function hotDownloadManifest() { + // eslint-disable-line no-unused-vars /******/ - return new Promise(function (resolve, reject) { + return new Promise(function(resolve, reject) { /******/ - if (typeof XMLHttpRequest === "undefined") - /******/ return reject(new Error("No browser support")); + if (typeof XMLHttpRequest === 'undefined') + /******/ return reject(new Error('No browser support')); /******/ try { /******/ var request = new XMLHttpRequest(); /******/ - var requestPath = __webpack_require__.p + "" + hotCurrentHash + ".hot-update.json"; + var requestPath = + __webpack_require__.p + '' + hotCurrentHash + '.hot-update.json'; /******/ - request.open("GET", requestPath, true); + request.open('GET', requestPath, true); /******/ request.timeout = 10000; /******/ @@ -65,27 +78,29 @@ /******/ } /******/ - request.onreadystatechange = function () { + request.onreadystatechange = function() { /******/ if (request.readyState !== 4) return; /******/ if (request.status === 0) { - /******/ // timeout + /******/ // timeout /******/ - reject(new Error("Manifest request to " + requestPath + " timed out.")); + reject( + new Error('Manifest request to ' + requestPath + ' timed out.') + ); /******/ } else if (request.status === 404) { - /******/ // no update available + /******/ // no update available /******/ resolve(); /******/ } else if (request.status !== 200 && request.status !== 304) { - /******/ // other failure + /******/ // other failure /******/ - reject(new Error("Manifest request to " + requestPath + " failed.")); + reject(new Error('Manifest request to ' + requestPath + ' failed.')); /******/ } else { - /******/ // success + /******/ // success /******/ try { /******/ @@ -115,7 +130,7 @@ /******/ var hotApplyOnUpdate = true; /******/ - var hotCurrentHash = "95562f821ab6d6d9346b"; // eslint-disable-line no-unused-vars + var hotCurrentHash = '95562f821ab6d6d9346b'; // eslint-disable-line no-unused-vars /******/ var hotCurrentModuleData = {}; /******/ @@ -127,20 +142,21 @@ /******/ /******/ - function hotCreateRequire(moduleId) { // eslint-disable-line no-unused-vars + function hotCreateRequire(moduleId) { + // eslint-disable-line no-unused-vars /******/ var me = installedModules[moduleId]; /******/ if (!me) return __webpack_require__; /******/ - var fn = function (request) { + var fn = function(request) { /******/ if (me.hot.active) { /******/ if (installedModules[request]) { /******/ if (installedModules[request].parents.indexOf(moduleId) < 0) - /******/ installedModules[request].parents.push(moduleId); + /******/ installedModules[request].parents.push(moduleId); /******/ } else { /******/ @@ -151,11 +167,16 @@ } /******/ if (me.children.indexOf(request) < 0) - /******/ me.children.push(request); + /******/ me.children.push(request); /******/ } else { /******/ - console.warn("[HMR] unexpected require(" + request + ") from disposed module " + moduleId); + console.warn( + '[HMR] unexpected require(' + + request + + ') from disposed module ' + + moduleId + ); /******/ hotCurrentParents = []; /******/ @@ -168,18 +189,18 @@ var ObjectFactory = function ObjectFactory(name) { /******/ return { - /******/ configurable: true, - /******/ enumerable: true, - /******/ get: function () { + /******/ configurable: true, + /******/ enumerable: true, + /******/ get: function() { /******/ return __webpack_require__[name]; /******/ }, - /******/ set: function (value) { + /******/ set: function(value) { /******/ __webpack_require__[name] = value; /******/ - } + }, /******/ }; /******/ @@ -187,7 +208,10 @@ /******/ for (var name in __webpack_require__) { /******/ - if (Object.prototype.hasOwnProperty.call(__webpack_require__, name) && name !== "e") { + if ( + Object.prototype.hasOwnProperty.call(__webpack_require__, name) && + name !== 'e' + ) { /******/ Object.defineProperty(fn, name, ObjectFactory(name)); /******/ @@ -195,20 +219,21 @@ /******/ } /******/ - fn.e = function (chunkId) { + fn.e = function(chunkId) { /******/ - if (hotStatus === "ready") - /******/ hotSetStatus("prepare"); + if (hotStatus === 'ready') /******/ hotSetStatus('prepare'); /******/ hotChunksLoading++; /******/ - return __webpack_require__.e(chunkId).then(finishChunkLoading, function (err) { - /******/ - finishChunkLoading(); - /******/ - throw err; - /******/ - }); + return __webpack_require__ + .e(chunkId) + .then(finishChunkLoading, function(err) { + /******/ + finishChunkLoading(); + /******/ + throw err; + /******/ + }); /******/ /******/ @@ -216,7 +241,7 @@ /******/ hotChunksLoading--; /******/ - if (hotStatus === "prepare") { + if (hotStatus === 'prepare') { /******/ if (!hotWaitingFilesMap[chunkId]) { /******/ @@ -244,88 +269,83 @@ /******/ /******/ - function hotCreateModule(moduleId) { // eslint-disable-line no-unused-vars + function hotCreateModule(moduleId) { + // eslint-disable-line no-unused-vars /******/ var hot = { - /******/ // private stuff - /******/ _acceptedDependencies: {}, - /******/ _declinedDependencies: {}, - /******/ _selfAccepted: false, - /******/ _selfDeclined: false, - /******/ _disposeHandlers: [], - /******/ _main: hotCurrentChildModule !== moduleId, - /******/ - /******/ // Module API - /******/ active: true, - /******/ accept: function (dep, callback) { - /******/ - if (typeof dep === "undefined") - /******/ hot._selfAccepted = true; - /******/ else if (typeof dep === "function") - /******/ hot._selfAccepted = dep; - /******/ else if (typeof dep === "object") - /******/ for (var i = 0; i < dep.length; i++) - /******/ hot._acceptedDependencies[dep[i]] = callback || function () { - }; - /******/ else - /******/ hot._acceptedDependencies[dep] = callback || function () { - }; + /******/ // private stuff + /******/ _acceptedDependencies: {}, + /******/ _declinedDependencies: {}, + /******/ _selfAccepted: false, + /******/ _selfDeclined: false, + /******/ _disposeHandlers: [], + /******/ _main: hotCurrentChildModule !== moduleId, // Module API + /******/ + /******/ /******/ active: true, + /******/ accept: function(dep, callback) { + /******/ + if (typeof dep === 'undefined') /******/ hot._selfAccepted = true; + else if (typeof dep === 'function') + /******/ /******/ hot._selfAccepted = dep; + else if (typeof dep === 'object') + /******/ /******/ for (var i = 0; i < dep.length; i++) + /******/ hot._acceptedDependencies[dep[i]] = + callback || function() {}; + else + /******/ /******/ hot._acceptedDependencies[dep] = + callback || function() {}; /******/ }, - /******/ decline: function (dep) { + /******/ decline: function(dep) { /******/ - if (typeof dep === "undefined") - /******/ hot._selfDeclined = true; - /******/ else if (typeof dep === "object") - /******/ for (var i = 0; i < dep.length; i++) - /******/ hot._declinedDependencies[dep[i]] = true; - /******/ else - /******/ hot._declinedDependencies[dep] = true; + if (typeof dep === 'undefined') /******/ hot._selfDeclined = true; + else if (typeof dep === 'object') + /******/ /******/ for (var i = 0; i < dep.length; i++) + /******/ hot._declinedDependencies[dep[i]] = true; + else /******/ /******/ hot._declinedDependencies[dep] = true; /******/ }, - /******/ dispose: function (callback) { + /******/ dispose: function(callback) { /******/ hot._disposeHandlers.push(callback); /******/ }, - /******/ addDisposeHandler: function (callback) { + /******/ addDisposeHandler: function(callback) { /******/ hot._disposeHandlers.push(callback); /******/ }, - /******/ removeDisposeHandler: function (callback) { + /******/ removeDisposeHandler: function(callback) { /******/ var idx = hot._disposeHandlers.indexOf(callback); /******/ if (idx >= 0) hot._disposeHandlers.splice(idx, 1); /******/ - }, + }, // Management API /******/ - /******/ // Management API - /******/ check: hotCheck, - /******/ apply: hotApply, - /******/ status: function (l) { + /******/ /******/ check: hotCheck, + /******/ apply: hotApply, + /******/ status: function(l) { /******/ if (!l) return hotStatus; /******/ hotStatusHandlers.push(l); /******/ }, - /******/ addStatusHandler: function (l) { + /******/ addStatusHandler: function(l) { /******/ hotStatusHandlers.push(l); /******/ }, - /******/ removeStatusHandler: function (l) { + /******/ removeStatusHandler: function(l) { /******/ var idx = hotStatusHandlers.indexOf(l); /******/ if (idx >= 0) hotStatusHandlers.splice(idx, 1); /******/ - }, + }, //inherit from previous dispose call /******/ - /******/ //inherit from previous dispose call - /******/ data: hotCurrentModuleData[moduleId] + /******/ /******/ data: hotCurrentModuleData[moduleId], /******/ }; /******/ @@ -339,7 +359,7 @@ /******/ var hotStatusHandlers = []; /******/ - var hotStatus = "idle"; + var hotStatus = 'idle'; /******/ /******/ @@ -348,13 +368,12 @@ hotStatus = newStatus; /******/ for (var i = 0; i < hotStatusHandlers.length; i++) - /******/ hotStatusHandlers[i].call(null, newStatus); + /******/ hotStatusHandlers[i].call(null, newStatus); /******/ - } + } // while downloading /******/ - /******/ // while downloading - /******/ + /******/ /******/ var hotWaitingFiles = 0; /******/ var hotChunksLoading = 0; @@ -365,17 +384,16 @@ /******/ var hotAvailableFilesMap = {}; /******/ - var hotDeferred; - /******/ - /******/ // The update info + var hotDeferred; // The update info /******/ + /******/ /******/ var hotUpdate, hotUpdateNewHash; /******/ /******/ function toModuleId(id) { /******/ - var isNumber = (+id) + "" === id; + var isNumber = +id + '' === id; /******/ return isNumber ? +id : id; /******/ @@ -386,17 +404,18 @@ /******/ function hotCheck(apply) { /******/ - if (hotStatus !== "idle") throw new Error("check() is only allowed in idle status"); + if (hotStatus !== 'idle') + throw new Error('check() is only allowed in idle status'); /******/ hotApplyOnUpdate = apply; /******/ - hotSetStatus("check"); + hotSetStatus('check'); /******/ - return hotDownloadManifest().then(function (update) { + return hotDownloadManifest().then(function(update) { /******/ if (!update) { /******/ - hotSetStatus("idle"); + hotSetStatus('idle'); /******/ return null; /******/ @@ -411,13 +430,13 @@ hotUpdateNewHash = update.h; /******/ /******/ - hotSetStatus("prepare"); + hotSetStatus('prepare'); /******/ - var promise = new Promise(function (resolve, reject) { + var promise = new Promise(function(resolve, reject) { /******/ hotDeferred = { - /******/ resolve: resolve, - /******/ reject: reject + /******/ resolve: resolve, + /******/ reject: reject, /******/ }; /******/ @@ -427,7 +446,8 @@ /******/ var chunkId = 1; /******/ - { // eslint-disable-line no-lone-blocks + { + // eslint-disable-line no-lone-blocks /******/ /*globals chunkId */ /******/ @@ -435,7 +455,11 @@ /******/ } /******/ - if (hotStatus === "prepare" && hotChunksLoading === 0 && hotWaitingFiles === 0) { + if ( + hotStatus === 'prepare' && + hotChunksLoading === 0 && + hotWaitingFiles === 0 + ) { /******/ hotUpdateDownloaded(); /******/ @@ -450,10 +474,11 @@ /******/ /******/ - function hotAddUpdateChunk(chunkId, moreModules) { // eslint-disable-line no-unused-vars + function hotAddUpdateChunk(chunkId, moreModules) { + // eslint-disable-line no-unused-vars /******/ if (!hotAvailableFilesMap[chunkId] || !hotRequestedFilesMap[chunkId]) - /******/ return; + /******/ return; /******/ hotRequestedFilesMap[chunkId] = false; /******/ @@ -501,7 +526,7 @@ /******/ function hotUpdateDownloaded() { /******/ - hotSetStatus("ready"); + hotSetStatus('ready'); /******/ var deferred = hotDeferred; /******/ @@ -511,15 +536,18 @@ /******/ if (hotApplyOnUpdate) { /******/ - hotApply(hotApplyOnUpdate).then(function (result) { - /******/ - deferred.resolve(result); - /******/ - }, function (err) { - /******/ - deferred.reject(err); - /******/ - }); + hotApply(hotApplyOnUpdate).then( + function(result) { + /******/ + deferred.resolve(result); + /******/ + }, + function(err) { + /******/ + deferred.reject(err); + /******/ + } + ); /******/ } else { /******/ @@ -546,7 +574,8 @@ /******/ function hotApply(options) { /******/ - if (hotStatus !== "ready") throw new Error("apply() is only allowed in ready status"); + if (hotStatus !== 'ready') + throw new Error('apply() is only allowed in ready status'); /******/ options = options || {}; /******/ @@ -570,11 +599,11 @@ var outdatedDependencies = {}; /******/ /******/ - var queue = outdatedModules.slice().map(function (id) { + var queue = outdatedModules.slice().map(function(id) { /******/ return { - /******/ chain: [id], - /******/ id: id + /******/ chain: [id], + /******/ id: id, /******/ }; /******/ @@ -590,15 +619,14 @@ /******/ module = installedModules[moduleId]; /******/ - if (!module || module.hot._selfAccepted) - /******/ continue; + if (!module || module.hot._selfAccepted) /******/ continue; /******/ if (module.hot._selfDeclined) { /******/ return { - /******/ type: "self-declined", - /******/ chain: chain, - /******/ moduleId: moduleId + /******/ type: 'self-declined', + /******/ chain: chain, + /******/ moduleId: moduleId, /******/ }; /******/ @@ -607,9 +635,9 @@ if (module.hot._main) { /******/ return { - /******/ type: "unaccepted", - /******/ chain: chain, - /******/ moduleId: moduleId + /******/ type: 'unaccepted', + /******/ chain: chain, + /******/ moduleId: moduleId, /******/ }; /******/ @@ -626,10 +654,10 @@ if (parent.hot._declinedDependencies[moduleId]) { /******/ return { - /******/ type: "declined", - /******/ chain: chain.concat([parentId]), - /******/ moduleId: moduleId, - /******/ parentId: parentId + /******/ type: 'declined', + /******/ chain: chain.concat([parentId]), + /******/ moduleId: moduleId, + /******/ parentId: parentId, /******/ }; /******/ @@ -640,7 +668,7 @@ if (parent.hot._acceptedDependencies[moduleId]) { /******/ if (!outdatedDependencies[parentId]) - /******/ outdatedDependencies[parentId] = []; + /******/ outdatedDependencies[parentId] = []; /******/ addAllToSet(outdatedDependencies[parentId], [moduleId]); /******/ @@ -653,8 +681,8 @@ outdatedModules.push(parentId); /******/ queue.push({ - /******/ chain: chain.concat([parentId]), - /******/ id: parentId + /******/ chain: chain.concat([parentId]), + /******/ id: parentId, /******/ }); /******/ @@ -664,10 +692,10 @@ /******/ /******/ return { - /******/ type: "accepted", - /******/ moduleId: updateModuleId, - /******/ outdatedModules: outdatedModules, - /******/ outdatedDependencies: outdatedDependencies + /******/ type: 'accepted', + /******/ moduleId: updateModuleId, + /******/ outdatedModules: outdatedModules, + /******/ outdatedDependencies: outdatedDependencies, /******/ }; /******/ @@ -682,17 +710,14 @@ /******/ var item = b[i]; /******/ - if (a.indexOf(item) < 0) - /******/ a.push(item); + if (a.indexOf(item) < 0) /******/ a.push(item); /******/ } /******/ - } + } // at begin all updates modules are outdated // the "outdated" status can propagate to parents if they don't accept the children /******/ - /******/ // at begin all updates modules are outdated - /******/ // the "outdated" status can propagate to parents if they don't accept the children - /******/ + /******/ /******/ /******/ var outdatedDependencies = {}; /******/ var outdatedModules = []; @@ -702,7 +727,9 @@ /******/ var warnUnexpectedRequire = function warnUnexpectedRequire() { /******/ - console.warn("[HMR] unexpected require(" + result.moduleId + ") to disposed module"); + console.warn( + '[HMR] unexpected require(' + result.moduleId + ') to disposed module' + ); /******/ }; /******/ @@ -722,8 +749,8 @@ } else { /******/ result = { - /******/ type: "disposed", - /******/ moduleId: id + /******/ type: 'disposed', + /******/ moduleId: id, /******/ }; /******/ @@ -735,59 +762,66 @@ /******/ var doDispose = false; /******/ - var chainInfo = ""; + var chainInfo = ''; /******/ if (result.chain) { /******/ - chainInfo = "\nUpdate propagation: " + result.chain.join(" -> "); + chainInfo = '\nUpdate propagation: ' + result.chain.join(' -> '); /******/ } /******/ switch (result.type) { /******/ - case "self-declined": + case 'self-declined': /******/ - if (options.onDeclined) - /******/ options.onDeclined(result); + if (options.onDeclined) /******/ options.onDeclined(result); /******/ if (!options.ignoreDeclined) - /******/ abortError = new Error("Aborted because of self decline: " + result.moduleId + chainInfo); + /******/ abortError = new Error( + 'Aborted because of self decline: ' + + result.moduleId + + chainInfo + ); /******/ break; /******/ - case "declined": + case 'declined': /******/ - if (options.onDeclined) - /******/ options.onDeclined(result); + if (options.onDeclined) /******/ options.onDeclined(result); /******/ if (!options.ignoreDeclined) - /******/ abortError = new Error("Aborted because of declined dependency: " + result.moduleId + " in " + result.parentId + chainInfo); + /******/ abortError = new Error( + 'Aborted because of declined dependency: ' + + result.moduleId + + ' in ' + + result.parentId + + chainInfo + ); /******/ break; /******/ - case "unaccepted": + case 'unaccepted': /******/ - if (options.onUnaccepted) - /******/ options.onUnaccepted(result); + if (options.onUnaccepted) /******/ options.onUnaccepted(result); /******/ if (!options.ignoreUnaccepted) - /******/ abortError = new Error("Aborted because " + moduleId + " is not accepted" + chainInfo); + /******/ abortError = new Error( + 'Aborted because ' + moduleId + ' is not accepted' + chainInfo + ); /******/ break; /******/ - case "accepted": + case 'accepted': /******/ - if (options.onAccepted) - /******/ options.onAccepted(result); + if (options.onAccepted) /******/ options.onAccepted(result); /******/ doApply = true; /******/ break; /******/ - case "disposed": + case 'disposed': /******/ - if (options.onDisposed) - /******/ options.onDisposed(result); + if (options.onDisposed) /******/ options.onDisposed(result); /******/ doDispose = true; /******/ @@ -795,13 +829,13 @@ /******/ default: /******/ - throw new Error("Unexception type " + result.type); + throw new Error('Unexception type ' + result.type); /******/ } /******/ if (abortError) { /******/ - hotSetStatus("abort"); + hotSetStatus('abort'); /******/ return Promise.reject(abortError); /******/ @@ -815,12 +849,20 @@ /******/ for (moduleId in result.outdatedDependencies) { /******/ - if (Object.prototype.hasOwnProperty.call(result.outdatedDependencies, moduleId)) { + if ( + Object.prototype.hasOwnProperty.call( + result.outdatedDependencies, + moduleId + ) + ) { /******/ if (!outdatedDependencies[moduleId]) - /******/ outdatedDependencies[moduleId] = []; + /******/ outdatedDependencies[moduleId] = []; /******/ - addAllToSet(outdatedDependencies[moduleId], result.outdatedDependencies[moduleId]); + addAllToSet( + outdatedDependencies[moduleId], + result.outdatedDependencies[moduleId] + ); /******/ } /******/ @@ -838,30 +880,31 @@ /******/ } /******/ - } - /******/ - /******/ // Store self accepted outdated modules to require them later by the module system + } // Store self accepted outdated modules to require them later by the module system /******/ + /******/ /******/ var outdatedSelfAcceptedModules = []; /******/ for (i = 0; i < outdatedModules.length; i++) { /******/ moduleId = outdatedModules[i]; /******/ - if (installedModules[moduleId] && installedModules[moduleId].hot._selfAccepted) - /******/ outdatedSelfAcceptedModules.push({ - /******/ module: moduleId, - /******/ errorHandler: installedModules[moduleId].hot._selfAccepted - /******/ - }); + if ( + installedModules[moduleId] && + installedModules[moduleId].hot._selfAccepted + ) + /******/ outdatedSelfAcceptedModules.push({ + /******/ module: moduleId, + /******/ errorHandler: installedModules[moduleId].hot._selfAccepted, + /******/ + }); /******/ - } - /******/ - /******/ // Now in "dispose" phase + } // Now in "dispose" phase /******/ - hotSetStatus("dispose"); + /******/ /******/ + hotSetStatus('dispose'); /******/ - Object.keys(hotAvailableFilesMap).forEach(function (chunkId) { + Object.keys(hotAvailableFilesMap).forEach(function(chunkId) { /******/ if (hotAvailableFilesMap[chunkId] === false) { /******/ @@ -885,10 +928,9 @@ if (!module) continue; /******/ /******/ - var data = {}; - /******/ - /******/ // Call dispose handlers + var data = {}; // Call dispose handlers /******/ + /******/ /******/ var disposeHandlers = module.hot._disposeHandlers; /******/ for (j = 0; j < disposeHandlers.length; j++) { @@ -899,18 +941,15 @@ /******/ } /******/ - hotCurrentModuleData[moduleId] = data; - /******/ - /******/ // disable module (this disables requires from this module) + hotCurrentModuleData[moduleId] = data; // disable module (this disables requires from this module) /******/ - module.hot.active = false; + /******/ /******/ + module.hot.active = false; // remove module from cache /******/ - /******/ // remove module from cache - /******/ - delete installedModules[moduleId]; - /******/ - /******/ // remove "parents" references from all children + /******/ /******/ + delete installedModules[moduleId]; // remove "parents" references from all children /******/ + /******/ /******/ for (j = 0; j < module.children.length; j++) { /******/ var child = installedModules[module.children[j]]; @@ -927,17 +966,18 @@ /******/ } /******/ - } - /******/ - /******/ // remove outdated dependency from module children + } // remove outdated dependency from module children /******/ + /******/ /******/ var dependency; /******/ var moduleOutdatedDependencies; /******/ for (moduleId in outdatedDependencies) { /******/ - if (Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)) { + if ( + Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId) + ) { /******/ module = installedModules[moduleId]; /******/ @@ -959,17 +999,15 @@ /******/ } /******/ - } - /******/ - /******/ // Not in "apply" phase - /******/ - hotSetStatus("apply"); + } // Not in "apply" phase /******/ + /******/ /******/ + hotSetStatus('apply'); /******/ - hotCurrentHash = hotUpdateNewHash; /******/ - /******/ // insert new code + hotCurrentHash = hotUpdateNewHash; // insert new code /******/ + /******/ /******/ for (moduleId in appliedUpdate) { /******/ if (Object.prototype.hasOwnProperty.call(appliedUpdate, moduleId)) { @@ -978,15 +1016,16 @@ /******/ } /******/ - } - /******/ - /******/ // call accept handlers + } // call accept handlers /******/ + /******/ /******/ var error = null; /******/ for (moduleId in outdatedDependencies) { /******/ - if (Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId)) { + if ( + Object.prototype.hasOwnProperty.call(outdatedDependencies, moduleId) + ) { /******/ module = installedModules[moduleId]; /******/ @@ -1019,10 +1058,10 @@ if (options.onErrored) { /******/ options.onErrored({ - /******/ type: "accept-errored", - /******/ moduleId: moduleId, - /******/ dependencyId: moduleOutdatedDependencies[i], - /******/ error: err + /******/ type: 'accept-errored', + /******/ moduleId: moduleId, + /******/ dependencyId: moduleOutdatedDependencies[i], + /******/ error: err, /******/ }); /******/ @@ -1030,8 +1069,7 @@ /******/ if (!options.ignoreErrored) { /******/ - if (!error) - /******/ error = err; + if (!error) /******/ error = err; /******/ } /******/ @@ -1041,10 +1079,9 @@ /******/ } /******/ - } - /******/ - /******/ // Load self accepted modules + } // Load self accepted modules /******/ + /******/ /******/ for (i = 0; i < outdatedSelfAcceptedModules.length; i++) { /******/ var item = outdatedSelfAcceptedModules[i]; @@ -1059,7 +1096,7 @@ /******/ } catch (err) { /******/ - if (typeof item.errorHandler === "function") { + if (typeof item.errorHandler === 'function') { /******/ try { /******/ @@ -1070,10 +1107,10 @@ if (options.onErrored) { /******/ options.onErrored({ - /******/ type: "self-accept-error-handler-errored", - /******/ moduleId: moduleId, - /******/ error: err2, - /******/ orginalError: err + /******/ type: 'self-accept-error-handler-errored', + /******/ moduleId: moduleId, + /******/ error: err2, + /******/ orginalError: err, /******/ }); /******/ @@ -1081,13 +1118,11 @@ /******/ if (!options.ignoreErrored) { /******/ - if (!error) - /******/ error = err2; + if (!error) /******/ error = err2; /******/ } /******/ - if (!error) - /******/ error = err; + if (!error) /******/ error = err; /******/ } /******/ @@ -1096,9 +1131,9 @@ if (options.onErrored) { /******/ options.onErrored({ - /******/ type: "self-accept-errored", - /******/ moduleId: moduleId, - /******/ error: err + /******/ type: 'self-accept-errored', + /******/ moduleId: moduleId, + /******/ error: err, /******/ }); /******/ @@ -1106,8 +1141,7 @@ /******/ if (!options.ignoreErrored) { /******/ - if (!error) - /******/ error = err; + if (!error) /******/ error = err; /******/ } /******/ @@ -1115,642 +1149,668 @@ /******/ } /******/ - } - /******/ - /******/ // handle errors in accept handlers and self accepted module load + } // handle errors in accept handlers and self accepted module load /******/ + /******/ /******/ if (error) { /******/ - hotSetStatus("fail"); + hotSetStatus('fail'); /******/ return Promise.reject(error); /******/ } /******/ /******/ - hotSetStatus("idle"); + hotSetStatus('idle'); /******/ - return new Promise(function (resolve) { + return new Promise(function(resolve) { /******/ resolve(outdatedModules); /******/ }); /******/ - } + } // The module cache /******/ - /******/ // The module cache - /******/ - var installedModules = {}; - /******/ - /******/ // The require function + /******/ /******/ + var installedModules = {}; // The require function /******/ + /******/ /******/ function __webpack_require__(moduleId) { /******/ - /******/ // Check if module is in cache + /******/ // Check if module is in cache /******/ if (installedModules[moduleId]) { /******/ return installedModules[moduleId].exports; /******/ - } - /******/ // Create a new module (and put it into the cache) - /******/ - var module = installedModules[moduleId] = { - /******/ i: moduleId, - /******/ l: false, - /******/ exports: {}, - /******/ hot: hotCreateModule(moduleId), - /******/ parents: (hotCurrentParentsTemp = hotCurrentParents, hotCurrentParents = [], hotCurrentParentsTemp), - /******/ children: [] - /******/ - }; - /******/ - /******/ // Execute the module function - /******/ - modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); - /******/ - /******/ // Flag the module as loaded - /******/ - module.l = true; - /******/ - /******/ // Return the exports of the module - /******/ + } // Create a new module (and put it into the cache) + /******/ /******/ + var module = (installedModules[moduleId] = { + /******/ i: moduleId, + /******/ l: false, + /******/ exports: {}, + /******/ hot: hotCreateModule(moduleId), + /******/ parents: ((hotCurrentParentsTemp = hotCurrentParents), + (hotCurrentParents = []), + hotCurrentParentsTemp), + /******/ children: [], + /******/ + }); // Execute the module function + /******/ + /******/ /******/ + modules[moduleId].call( + module.exports, + module, + module.exports, + hotCreateRequire(moduleId) + ); // Flag the module as loaded + /******/ + /******/ /******/ + module.l = true; // Return the exports of the module + /******/ + /******/ /******/ return module.exports; /******/ - } + } // expose the modules object (__webpack_modules__) /******/ /******/ - /******/ // expose the modules object (__webpack_modules__) + /******/ /******/ + __webpack_require__.m = modules; // expose the module cache /******/ - __webpack_require__.m = modules; + /******/ /******/ + __webpack_require__.c = installedModules; // identity function for calling harmony imports with the correct context /******/ - /******/ // expose the module cache - /******/ - __webpack_require__.c = installedModules; - /******/ - /******/ // identity function for calling harmony imports with the correct context - /******/ - __webpack_require__.i = function (value) { + /******/ /******/ + __webpack_require__.i = function(value) { return value; - }; + }; // define getter function for harmony exports /******/ - /******/ // define getter function for harmony exports - /******/ - __webpack_require__.d = function (exports, name, getter) { + /******/ /******/ + __webpack_require__.d = function(exports, name, getter) { /******/ if (!__webpack_require__.o(exports, name)) { /******/ Object.defineProperty(exports, name, { - /******/ configurable: false, - /******/ enumerable: true, - /******/ get: getter + /******/ configurable: false, + /******/ enumerable: true, + /******/ get: getter, /******/ }); /******/ } /******/ - }; + }; // getDefaultExport function for compatibility with non-harmony modules /******/ - /******/ // getDefaultExport function for compatibility with non-harmony modules - /******/ - __webpack_require__.n = function (module) { - /******/ - var getter = module && module.__esModule ? - /******/ function getDefault() { - return module['default']; - } : - /******/ function getModuleExports() { - return module; - }; + /******/ /******/ + __webpack_require__.n = function(module) { + /******/ + var getter = + module && module.__esModule + ? /******/ function getDefault() { + return module['default']; + } + : /******/ function getModuleExports() { + return module; + }; /******/ __webpack_require__.d(getter, 'a', getter); /******/ return getter; /******/ - }; + }; // Object.prototype.hasOwnProperty.call /******/ - /******/ // Object.prototype.hasOwnProperty.call - /******/ - __webpack_require__.o = function (object, property) { + /******/ /******/ + __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); - }; - /******/ - /******/ // __webpack_public_path__ - /******/ - __webpack_require__.p = ""; + }; // __webpack_public_path__ /******/ - /******/ // __webpack_hash__ + /******/ /******/ + __webpack_require__.p = ''; // __webpack_hash__ /******/ - __webpack_require__.h = function () { + /******/ /******/ + __webpack_require__.h = function() { return hotCurrentHash; - }; - /******/ - /******/ // Load entry module and return exports - /******/ - return hotCreateRequire("./a/index.js")(__webpack_require__.s = "./a/index.js"); - /******/ -}) -/************************************************************************/ -/******/({ - - /***/ "../../node_modules/css-loader/index.js!./a/index.css": - /***/ (function (module, exports, __webpack_require__) { - - exports = module.exports = __webpack_require__("../../node_modules/css-loader/lib/css-base.js")(undefined); -// imports - - -// module - exports.push([module.i, "body {\n text-align: center;\n color: lawngreen;\n background-color: black;\n}", ""]); - -// exports - - - /***/ - }), - - /***/ "../../node_modules/css-loader/lib/css-base.js": - /***/ (function (module, exports) { - - /* + }; // Load entry module and return exports + /******/ + /******/ /******/ + return hotCreateRequire('./a/index.js')( + (__webpack_require__.s = './a/index.js') + ); + /******/ +})( + /************************************************************************/ + /******/ { + /***/ /***/ '../../node_modules/css-loader/index.js!./a/index.css': function( + module, + exports, + __webpack_require__ + ) { + exports = module.exports = __webpack_require__( + '../../node_modules/css-loader/lib/css-base.js' + )(undefined); + // imports + + // module + exports.push([ + module.i, + 'body {\n text-align: center;\n color: lawngreen;\n background-color: black;\n}', + '', + ]); + + // exports + + /***/ + }, + + /***/ /***/ '../../node_modules/css-loader/lib/css-base.js': function( + module, + exports + ) { + /* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */ -// css base code, injected by the css-loader - module.exports = function (useSourceMap) { - var list = []; - - // return the list of modules as css string - list.toString = function toString() { - return this.map(function (item) { - var content = cssWithMappingToString(item, useSourceMap); - if (item[2]) { - return "@media " + item[2] + "{" + content + "}"; - } else { - return content; - } - }).join(""); - }; + // css base code, injected by the css-loader + module.exports = function(useSourceMap) { + var list = []; + + // return the list of modules as css string + list.toString = function toString() { + return this.map(function(item) { + var content = cssWithMappingToString(item, useSourceMap); + if (item[2]) { + return '@media ' + item[2] + '{' + content + '}'; + } else { + return content; + } + }).join(''); + }; - // import a list of modules into the list - list.i = function (modules, mediaQuery) { - if (typeof modules === "string") - modules = [[null, modules, ""]]; - var alreadyImportedModules = {}; - for (var i = 0; i < this.length; i++) { - var id = this[i][0]; - if (typeof id === "number") - alreadyImportedModules[id] = true; - } - for (i = 0; i < modules.length; i++) { - var item = modules[i]; - // skip already imported module - // this implementation is not 100% perfect for weird media query combinations - // when a module is imported multiple times with different media queries. - // I hope this will never occur (Hey this way we have smaller bundles) - if (typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { - if (mediaQuery && !item[2]) { - item[2] = mediaQuery; - } else if (mediaQuery) { - item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; + // import a list of modules into the list + list.i = function(modules, mediaQuery) { + if (typeof modules === 'string') modules = [[null, modules, '']]; + var alreadyImportedModules = {}; + for (var i = 0; i < this.length; i++) { + var id = this[i][0]; + if (typeof id === 'number') alreadyImportedModules[id] = true; + } + for (i = 0; i < modules.length; i++) { + var item = modules[i]; + // skip already imported module + // this implementation is not 100% perfect for weird media query combinations + // when a module is imported multiple times with different media queries. + // I hope this will never occur (Hey this way we have smaller bundles) + if ( + typeof item[0] !== 'number' || + !alreadyImportedModules[item[0]] + ) { + if (mediaQuery && !item[2]) { + item[2] = mediaQuery; + } else if (mediaQuery) { + item[2] = '(' + item[2] + ') and (' + mediaQuery + ')'; + } + list.push(item); } - list.push(item); } - } + }; + return list; }; - return list; - }; - - function cssWithMappingToString(item, useSourceMap) { - var content = item[1] || ''; - var cssMapping = item[3]; - if (!cssMapping) { - return content; - } - - if (useSourceMap && typeof btoa === 'function') { - var sourceMapping = toComment(cssMapping); - var sourceURLs = cssMapping.sources.map(function (source) { - return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' - }); - return [content].concat(sourceURLs).concat([sourceMapping]).join('\n'); - } - - return [content].join('\n'); - } + function cssWithMappingToString(item, useSourceMap) { + var content = item[1] || ''; + var cssMapping = item[3]; + if (!cssMapping) { + return content; + } -// Adapted from convert-source-map (MIT) - function toComment(sourceMap) { - // eslint-disable-next-line no-undef - var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))); - var data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64; + if (useSourceMap && typeof btoa === 'function') { + var sourceMapping = toComment(cssMapping); + var sourceURLs = cssMapping.sources.map(function(source) { + return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'; + }); - return '/*# ' + data + ' */'; - } + return [content] + .concat(sourceURLs) + .concat([sourceMapping]) + .join('\n'); + } + return [content].join('\n'); + } - /***/ - }), + // Adapted from convert-source-map (MIT) + function toComment(sourceMap) { + // eslint-disable-next-line no-undef + var base64 = btoa( + unescape(encodeURIComponent(JSON.stringify(sourceMap))) + ); + var data = + 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + + base64; + + return '/*# ' + data + ' */'; + } - /***/ "../../node_modules/style-loader/lib/addStyles.js": - /***/ (function (module, exports, __webpack_require__) { + /***/ + }, - /* + /***/ /***/ '../../node_modules/style-loader/lib/addStyles.js': function( + module, + exports, + __webpack_require__ + ) { + /* MIT License http://www.opensource.org/licenses/mit-license.php Author Tobias Koppers @sokra */ - var stylesInDom = {}; + var stylesInDom = {}; - var memoize = function (fn) { - var memo; + var memoize = function(fn) { + var memo; - return function () { - if (typeof memo === "undefined") memo = fn.apply(this, arguments); - return memo; + return function() { + if (typeof memo === 'undefined') memo = fn.apply(this, arguments); + return memo; + }; }; - }; - var isOldIE = memoize(function () { - // Test for IE <= 9 as proposed by Browserhacks - // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805 - // Tests for existence of standard globals is to allow style-loader - // to operate correctly into non-standard environments - // @see https://github.com/webpack-contrib/style-loader/issues/177 - return window && document && document.all && !window.atob; - }); + var isOldIE = memoize(function() { + // Test for IE <= 9 as proposed by Browserhacks + // @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805 + // Tests for existence of standard globals is to allow style-loader + // to operate correctly into non-standard environments + // @see https://github.com/webpack-contrib/style-loader/issues/177 + return window && document && document.all && !window.atob; + }); - var getElement = (function (fn) { - var memo = {}; + var getElement = (function(fn) { + var memo = {}; - return function (selector) { - if (typeof memo[selector] === "undefined") { - memo[selector] = fn.call(this, selector); - } + return function(selector) { + if (typeof memo[selector] === 'undefined') { + memo[selector] = fn.call(this, selector); + } - return memo[selector] - }; - })(function (target) { - return document.querySelector(target) - }); + return memo[selector]; + }; + })(function(target) { + return document.querySelector(target); + }); - var singleton = null; - var singletonCounter = 0; - var stylesInsertedAtTop = []; + var singleton = null; + var singletonCounter = 0; + var stylesInsertedAtTop = []; - var fixUrls = __webpack_require__("../../node_modules/style-loader/lib/urls.js"); + var fixUrls = __webpack_require__( + '../../node_modules/style-loader/lib/urls.js' + ); - module.exports = function (list, options) { - if (typeof DEBUG !== "undefined" && DEBUG) { - if (typeof document !== "object") throw new Error("The style-loader cannot be used in a non-browser environment"); - } + module.exports = function(list, options) { + if (typeof DEBUG !== 'undefined' && DEBUG) { + if (typeof document !== 'object') + throw new Error( + 'The style-loader cannot be used in a non-browser environment' + ); + } - options = options || {}; + options = options || {}; - options.attrs = typeof options.attrs === "object" ? options.attrs : {}; + options.attrs = typeof options.attrs === 'object' ? options.attrs : {}; - // Force single-tag solution on IE6-9, which has a hard limit on the # of +} + + - + diff --git a/demo/issue6/dist/home.js b/demo/issue6/dist/home.js index a96e021..eb42ddb 100644 --- a/demo/issue6/dist/home.js +++ b/demo/issue6/dist/home.js @@ -1,87 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__(1); - - -/***/ }), -/* 1 */ -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__(2); -alert('page home'); - -/***/ }), -/* 2 */ -/***/ (function(module, exports) { - -// removed by extract-text-webpack-plugin - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=12)}({10:function(e,t,n){},11:function(e,t,n){n(10),alert("page home")},12:function(e,t,n){e.exports=n(11)}}); \ No newline at end of file diff --git a/demo/issue6/dist/login.css b/demo/issue6/dist/login.css index 27c9487..a76251f 100644 --- a/demo/issue6/dist/login.css +++ b/demo/issue6/dist/login.css @@ -1,3 +1,4 @@ body { background-color: blue; -} \ No newline at end of file +} + diff --git a/demo/issue6/dist/login.html b/demo/issue6/dist/login.html index aa9ad2e..fdb45e2 100644 --- a/demo/issue6/dist/login.html +++ b/demo/issue6/dist/login.html @@ -6,101 +6,14 @@ +} + + - + diff --git a/demo/issue6/dist/login.js b/demo/issue6/dist/login.js index 4c3d745..932d277 100644 --- a/demo/issue6/dist/login.js +++ b/demo/issue6/dist/login.js @@ -1,90 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 3); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */, -/* 2 */, -/* 3 */ -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__(4); - - -/***/ }), -/* 4 */ -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__(5); -alert('page login'); - -/***/ }), -/* 5 */ -/***/ (function(module, exports) { - -// removed by extract-text-webpack-plugin - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=8)}({6:function(e,t,n){},7:function(e,t,n){n(6),alert("page login")},8:function(e,t,n){e.exports=n(7)}}); \ No newline at end of file diff --git a/demo/issue6/dist/polyfill.js b/demo/issue6/dist/polyfill.js index 18ee988..a40d3ca 100644 --- a/demo/issue6/dist/polyfill.js +++ b/demo/issue6/dist/polyfill.js @@ -1,75 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 9); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ 9: -/***/ (function(module, exports) { - -alert('polyfill'); - -/***/ }) - -/******/ }); \ No newline at end of file +!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){alert("polyfill")}]); \ No newline at end of file diff --git a/demo/issue6/dist/signup.css b/demo/issue6/dist/signup.css index 45b90d8..41d9b74 100644 --- a/demo/issue6/dist/signup.css +++ b/demo/issue6/dist/signup.css @@ -1,3 +1,4 @@ body { background-color: yellow; -} \ No newline at end of file +} + diff --git a/demo/issue6/dist/signup.html b/demo/issue6/dist/signup.html index dcd6fa2..b4b5561 100644 --- a/demo/issue6/dist/signup.html +++ b/demo/issue6/dist/signup.html @@ -6,102 +6,14 @@ +} + + - + diff --git a/demo/issue6/dist/signup.js b/demo/issue6/dist/signup.js index 2388757..d748fcf 100644 --- a/demo/issue6/dist/signup.js +++ b/demo/issue6/dist/signup.js @@ -1,91 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 6); -/******/ }) -/************************************************************************/ -/******/ ({ - -/***/ 6: -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__(7); - - -/***/ }), - -/***/ 7: -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__(8); -alert('page signup'); - -/***/ }), - -/***/ 8: -/***/ (function(module, exports) { - -// removed by extract-text-webpack-plugin - -/***/ }) - -/******/ }); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=4)}([,,function(e,t,n){},function(e,t,n){n(2),alert("page signup")},function(e,t,n){e.exports=n(3)}]); \ No newline at end of file diff --git a/demo/issue6/src/home/index.css b/demo/issue6/src/home/index.css index 40363d3..e8c8b61 100644 --- a/demo/issue6/src/home/index.css +++ b/demo/issue6/src/home/index.css @@ -1,3 +1,3 @@ body { background-color: red; -} \ No newline at end of file +} diff --git a/demo/issue6/src/home/index.js b/demo/issue6/src/home/index.js index 884c2e2..d365940 100644 --- a/demo/issue6/src/home/index.js +++ b/demo/issue6/src/home/index.js @@ -1,2 +1,2 @@ require('./index.css'); -alert('page home'); \ No newline at end of file +alert('page home'); diff --git a/demo/issue6/src/login/index.css b/demo/issue6/src/login/index.css index 27c9487..d7cf32a 100644 --- a/demo/issue6/src/login/index.css +++ b/demo/issue6/src/login/index.css @@ -1,3 +1,3 @@ body { background-color: blue; -} \ No newline at end of file +} diff --git a/demo/issue6/src/login/index.js b/demo/issue6/src/login/index.js index 2605741..5e79860 100644 --- a/demo/issue6/src/login/index.js +++ b/demo/issue6/src/login/index.js @@ -1,2 +1,2 @@ require('./index.css'); -alert('page login'); \ No newline at end of file +alert('page login'); diff --git a/demo/issue6/src/polyfill.js b/demo/issue6/src/polyfill.js index f30137a..efaa47c 100644 --- a/demo/issue6/src/polyfill.js +++ b/demo/issue6/src/polyfill.js @@ -1 +1 @@ -alert('polyfill'); \ No newline at end of file +alert('polyfill'); diff --git a/demo/issue6/src/signup/index.css b/demo/issue6/src/signup/index.css index 45b90d8..3fe8c50 100644 --- a/demo/issue6/src/signup/index.css +++ b/demo/issue6/src/signup/index.css @@ -1,3 +1,3 @@ body { background-color: yellow; -} \ No newline at end of file +} diff --git a/demo/issue6/src/signup/index.js b/demo/issue6/src/signup/index.js index 2886c2f..1c1c159 100644 --- a/demo/issue6/src/signup/index.js +++ b/demo/issue6/src/signup/index.js @@ -1,2 +1,2 @@ require('./index.css'); -alert('page signup'); \ No newline at end of file +alert('page signup'); diff --git a/demo/issue6/webpack.config.js b/demo/issue6/webpack.config.js index e2e519c..b01f8e0 100644 --- a/demo/issue6/webpack.config.js +++ b/demo/issue6/webpack.config.js @@ -1,7 +1,7 @@ const path = require('path'); const fs = require('fs'); const ejs = require('ejs'); -const ExtractTextPlugin = require('extract-text-webpack-plugin'); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { AutoWebPlugin } = require('../../index'); const autoPlugin = new AutoWebPlugin('./src/', { @@ -13,7 +13,7 @@ const autoPlugin = new AutoWebPlugin('./src/', { return ejs.render(ejsTemplate, { pageName, }); - } + }, }); module.exports = { @@ -25,18 +25,17 @@ module.exports = { polyfill: './src/polyfill', }), module: { - loaders: [ + rules: [ { test: /\.css$/, - loader: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: 'css-loader' - }) - } - ] + loader: [MiniCssExtractPlugin.loader, 'css-loader'], + }, + ], }, plugins: [ - new ExtractTextPlugin('[name].css'), + new MiniCssExtractPlugin({ + filename: '[name].css', + }), autoPlugin, - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/load-local-file/README.md b/demo/load-local-file/README.md index 91982b5..efe9521 100644 --- a/demo/load-local-file/README.md +++ b/demo/load-local-file/README.md @@ -1,6 +1,7 @@ # 直接注入本地文件 -`WebPlugin`除了可以注入webpack生成的chunk外，还可以直接读取本地文件原封不动的注入到HTML里去。 -如下： + +`WebPlugin`除了可以注入 webpack 生成的 chunk 外，还可以直接读取本地文件原封不动的注入到 HTML 里去。如下： + ```html @@ -18,8 +19,10 @@ ``` + 如果资源路径类似： -- `./jquery.js` 以`./` `/` `../` 这些开头的就认为是要读取本地文件 -- `A` 这样的直接是一个单词，就认为是webpack chunk -同时支持JS和CSS +* `./jquery.js` 以`./` `/` `../` 这些开头的就认为是要读取本地文件 +* `A` 这样的直接是一个单词，就认为是 webpack chunk + +同时支持 JS 和 CSS diff --git a/demo/load-local-file/a.js b/demo/load-local-file/a.js index bfcdbb1..4ee3bc3 100644 --- a/demo/load-local-file/a.js +++ b/demo/load-local-file/a.js @@ -1 +1 @@ -console.log('module A load from web-webpack-plugin'); \ No newline at end of file +console.log('module A load from web-webpack-plugin'); diff --git a/demo/load-local-file/dist-prod/A_31bda441e4109dd7675b.js b/demo/load-local-file/dist-prod/A_31bda441e4109dd7675b.js deleted file mode 100644 index 7467617..0000000 --- a/demo/load-local-file/dist-prod/A_31bda441e4109dd7675b.js +++ /dev/null @@ -1 +0,0 @@ -!function(e){function n(o){if(r[o])return r[o].exports;var t=r[o]={i:o,l:!1,exports:{}};return e[o].call(t.exports,t,t.exports,n),t.l=!0,t.exports}var r={};n.m=e,n.c=r,n.d=function(e,r,o){n.o(e,r)||Object.defineProperty(e,r,{configurable:!1,enumerable:!0,get:o})},n.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(r,"a",r),r},n.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},n.p="//cdn.cn/web",n(n.s=0)}([function(e,n){console.log("module A load from web-webpack-plugin")}]); \ No newline at end of file diff --git a/demo/load-local-file/dist-prod/README.md b/demo/load-local-file/dist-prod/README.md index 91982b5..efe9521 100644 --- a/demo/load-local-file/dist-prod/README.md +++ b/demo/load-local-file/dist-prod/README.md @@ -1,6 +1,7 @@ # 直接注入本地文件 -`WebPlugin`除了可以注入webpack生成的chunk外，还可以直接读取本地文件原封不动的注入到HTML里去。 -如下： + +`WebPlugin`除了可以注入 webpack 生成的 chunk 外，还可以直接读取本地文件原封不动的注入到 HTML 里去。如下： + ```html @@ -18,8 +19,10 @@ ``` + 如果资源路径类似： -- `./jquery.js` 以`./` `/` `../` 这些开头的就认为是要读取本地文件 -- `A` 这样的直接是一个单词，就认为是webpack chunk -同时支持JS和CSS +* `./jquery.js` 以`./` `/` `../` 这些开头的就认为是要读取本地文件 +* `A` 这样的直接是一个单词，就认为是 webpack chunk + +同时支持 JS 和 CSS diff --git a/demo/load-local-file/dist-prod/ie-polyfill.js b/demo/load-local-file/dist-prod/ie-polyfill.js index 654b12e..8d584ec 100644 --- a/demo/load-local-file/dist-prod/ie-polyfill.js +++ b/demo/load-local-file/dist-prod/ie-polyfill.js @@ -1 +1 @@ -console.log('ie'); \ No newline at end of file +console.log('ie'); diff --git a/demo/load-local-file/dist-prod/index.html b/demo/load-local-file/dist-prod/index.html index dd0e281..1e071fa 100644 --- a/demo/load-local-file/dist-prod/index.html +++ b/demo/load-local-file/dist-prod/index.html @@ -1,3 +1,3 @@
img \ No newline at end of file +}
img \ No newline at end of file diff --git a/demo/load-local-file/dist-prod/jquery.js b/demo/load-local-file/dist-prod/jquery.js index 6ea51cd..ed71e13 100644 --- a/demo/load-local-file/dist-prod/jquery.js +++ b/demo/load-local-file/dist-prod/jquery.js @@ -1 +1 @@ -console.log('jq'); \ No newline at end of file +console.log('jq'); diff --git a/demo/load-local-file/dist/A.js b/demo/load-local-file/dist/A.js index 5dd6456..982cfb2 100644 --- a/demo/load-local-file/dist/A.js +++ b/demo/load-local-file/dist/A.js @@ -1,73 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports) { - -console.log('module A load from web-webpack-plugin'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("module A load from web-webpack-plugin")}]); \ No newline at end of file diff --git a/demo/load-local-file/dist/README.md b/demo/load-local-file/dist/README.md index 91982b5..efe9521 100644 --- a/demo/load-local-file/dist/README.md +++ b/demo/load-local-file/dist/README.md @@ -1,6 +1,7 @@ # 直接注入本地文件 -`WebPlugin`除了可以注入webpack生成的chunk外，还可以直接读取本地文件原封不动的注入到HTML里去。 -如下： + +`WebPlugin`除了可以注入 webpack 生成的 chunk 外，还可以直接读取本地文件原封不动的注入到 HTML 里去。如下： + ```html @@ -18,8 +19,10 @@ ``` + 如果资源路径类似： -- `./jquery.js` 以`./` `/` `../` 这些开头的就认为是要读取本地文件 -- `A` 这样的直接是一个单词，就认为是webpack chunk -同时支持JS和CSS +* `./jquery.js` 以`./` `/` `../` 这些开头的就认为是要读取本地文件 +* `A` 这样的直接是一个单词，就认为是 webpack chunk + +同时支持 JS 和 CSS diff --git a/demo/load-local-file/dist/ie-polyfill.js b/demo/load-local-file/dist/ie-polyfill.js index 654b12e..8d584ec 100644 --- a/demo/load-local-file/dist/ie-polyfill.js +++ b/demo/load-local-file/dist/ie-polyfill.js @@ -1 +1 @@ -console.log('ie'); \ No newline at end of file +console.log('ie'); diff --git a/demo/load-local-file/dist/index.html b/demo/load-local-file/dist/index.html index 8c4c5e4..1d05aec 100644 --- a/demo/load-local-file/dist/index.html +++ b/demo/load-local-file/dist/index.html @@ -5,7 +5,8 @@ +} + diff --git a/demo/load-local-file/dist/jquery.js b/demo/load-local-file/dist/jquery.js index 6ea51cd..ed71e13 100644 --- a/demo/load-local-file/dist/jquery.js +++ b/demo/load-local-file/dist/jquery.js @@ -1 +1 @@ -console.log('jq'); \ No newline at end of file +console.log('jq'); diff --git a/demo/load-local-file/ie-polyfill.js b/demo/load-local-file/ie-polyfill.js index 654b12e..8d584ec 100644 --- a/demo/load-local-file/ie-polyfill.js +++ b/demo/load-local-file/ie-polyfill.js @@ -1 +1 @@ -console.log('ie'); \ No newline at end of file +console.log('ie'); diff --git a/demo/load-local-file/jquery.js b/demo/load-local-file/jquery.js index 6ea51cd..ed71e13 100644 --- a/demo/load-local-file/jquery.js +++ b/demo/load-local-file/jquery.js @@ -1 +1 @@ -console.log('jq'); \ No newline at end of file +console.log('jq'); diff --git a/demo/load-local-file/reset.css b/demo/load-local-file/reset.css index 40363d3..e8c8b61 100644 --- a/demo/load-local-file/reset.css +++ b/demo/load-local-file/reset.css @@ -1,3 +1,3 @@ body { background-color: red; -} \ No newline at end of file +} diff --git a/demo/load-local-file/webpack-prod.config.js b/demo/load-local-file/webpack-prod.config.js index af11062..6ecca24 100644 --- a/demo/load-local-file/webpack-prod.config.js +++ b/demo/load-local-file/webpack-prod.config.js @@ -5,7 +5,7 @@ module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: '[name]_[chunkhash].js', - publicPath: '//cdn.cn/web' + publicPath: '//cdn.cn/web', }, entry: { A: './a', @@ -15,5 +15,5 @@ module.exports = { filename: 'index.html', template: './template.html', }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/load-local-file/webpack.config.js b/demo/load-local-file/webpack.config.js index 88e29f2..d9521d7 100644 --- a/demo/load-local-file/webpack.config.js +++ b/demo/load-local-file/webpack.config.js @@ -14,5 +14,5 @@ module.exports = { filename: 'index.html', template: './template.html', }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/minify-html/README.md b/demo/minify-html/README.md index 59b80bc..05d4916 100644 --- a/demo/minify-html/README.md +++ b/demo/minify-html/README.md @@ -1,11 +1,12 @@ -# 压缩输出的HTML +# 压缩输出的 HTML + ```js const { minify } = require('html-minifier'); new WebPlugin({ - htmlMinify: (orgHTML) => { - return minify(orgHTML, { - minifyJS: true, - }); - } -}) + htmlMinify: (orgHTML) => { + return minify(orgHTML, { + minifyJS: true, + }); + }, +}); ``` diff --git a/demo/minify-html/a.js b/demo/minify-html/a.js index d508760..9d6a8d7 100644 --- a/demo/minify-html/a.js +++ b/demo/minify-html/a.js @@ -4,4 +4,4 @@ function f(x) { let x = 'hello web-webpack-plugin from a'; -f(x); \ No newline at end of file +f(x); diff --git a/demo/minify-html/dist/A.js b/demo/minify-html/dist/A.js index df356ed..7ff423a 100644 --- a/demo/minify-html/dist/A.js +++ b/demo/minify-html/dist/A.js @@ -1,79 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports) { - -function f(x) { - console.log(x); -} - -let x = 'hello web-webpack-plugin from a'; - -f(x); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){!function(e){console.log(e)}("hello web-webpack-plugin from a")}]); \ No newline at end of file diff --git a/demo/minify-html/dist/index.html b/demo/minify-html/dist/index.html index e08191c..b3c63ed 100644 --- a/demo/minify-html/dist/index.html +++ b/demo/minify-html/dist/index.html @@ -8,88 +8,11 @@ a { margin: 0; background-color: #ffffff; -} +} + - +
web-webpack-plugin
\ No newline at end of file diff --git a/demo/minify-html/reset.min.css b/demo/minify-html/reset.min.css index 3725176..925937e 100644 --- a/demo/minify-html/reset.min.css +++ b/demo/minify-html/reset.min.css @@ -5,4 +5,4 @@ body { a { margin: 0; background-color: #ffffff; -} \ No newline at end of file +} diff --git a/demo/minify-html/webpack.config.js b/demo/minify-html/webpack.config.js index 89cf4e3..622fdac 100644 --- a/demo/minify-html/webpack.config.js +++ b/demo/minify-html/webpack.config.js @@ -18,7 +18,7 @@ module.exports = { return minify(orgHTML, { minifyJS: true, }); - } + }, }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/out-html/a.js b/demo/out-html/a.js index 1bbc0a5..7887f8d 100644 --- a/demo/out-html/a.js +++ b/demo/out-html/a.js @@ -1 +1 @@ -alert('hello web-webpack-plugin from a'); \ No newline at end of file +alert('hello web-webpack-plugin from a'); diff --git a/demo/out-html/b.js b/demo/out-html/b.js index c085244..ca8697a 100644 --- a/demo/out-html/b.js +++ b/demo/out-html/b.js @@ -1 +1 @@ -alert('hello web-webpack-plugin from b'); \ No newline at end of file +alert('hello web-webpack-plugin from b'); diff --git a/demo/out-html/dist/A.js b/demo/out-html/dist/A.js index bc0cdaa..21fb4da 100644 --- a/demo/out-html/dist/A.js +++ b/demo/out-html/dist/A.js @@ -1,73 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports) { - -alert('hello web-webpack-plugin from a'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=1)}([,function(e,t){alert("hello web-webpack-plugin from a")}]); \ No newline at end of file diff --git a/demo/out-html/dist/B.js b/demo/out-html/dist/B.js index 647c82a..8890362 100644 --- a/demo/out-html/dist/B.js +++ b/demo/out-html/dist/B.js @@ -1,74 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 1); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */ -/***/ (function(module, exports) { - -alert('hello web-webpack-plugin from b'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t){alert("hello web-webpack-plugin from b")}]); \ No newline at end of file diff --git a/demo/out-html/webpack.config.js b/demo/out-html/webpack.config.js index a798276..17343a9 100644 --- a/demo/out-html/webpack.config.js +++ b/demo/out-html/webpack.config.js @@ -15,5 +15,5 @@ module.exports = { filename: 'index.html', requires: ['A', 'B'], }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/pre-post-entrys/dist/google-analytics.js b/demo/pre-post-entrys/dist/google-analytics.js index c32e706..e2ae6e7 100644 --- a/demo/pre-post-entrys/dist/google-analytics.js +++ b/demo/pre-post-entrys/dist/google-analytics.js @@ -1,74 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 1); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */ -/***/ (function(module, exports) { - -console.log('google-analytics'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("google-analytics")}]); \ No newline at end of file diff --git a/demo/pre-post-entrys/dist/page1.js b/demo/pre-post-entrys/dist/page1.js index 22ae564..75630d3 100644 --- a/demo/pre-post-entrys/dist/page1.js +++ b/demo/pre-post-entrys/dist/page1.js @@ -1,94 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 2); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports) { - -console.log('polyfill'); - -/***/ }), -/* 1 */ -/***/ (function(module, exports) { - -console.log('google-analytics'); - -/***/ }), -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -__webpack_require__(0); -__webpack_require__(3); -module.exports = __webpack_require__(1); - - -/***/ }), -/* 3 */ -/***/ (function(module, exports) { - -console.log('page1'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var n={};function t(o){if(n[o])return n[o].exports;var r=n[o]={i:o,l:!1,exports:{}};return e[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:o})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(t.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var r in e)t.d(o,r,function(n){return e[n]}.bind(null,r));return o},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="",t(t.s=3)}([function(e,n){console.log("google-analytics")},function(e,n){console.log("polyfill")},function(e,n){console.log("page1")},function(e,n,t){t(1),t(2),e.exports=t(0)}]); \ No newline at end of file diff --git a/demo/pre-post-entrys/dist/polyfill.js b/demo/pre-post-entrys/dist/polyfill.js index a230327..8356dc2 100644 --- a/demo/pre-post-entrys/dist/polyfill.js +++ b/demo/pre-post-entrys/dist/polyfill.js @@ -1,73 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports) { - -console.log('polyfill'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([,function(e,t){console.log("polyfill")}]); \ No newline at end of file diff --git a/demo/pre-post-entrys/google-analytics.js b/demo/pre-post-entrys/google-analytics.js index 5ec7469..d19cdac 100644 --- a/demo/pre-post-entrys/google-analytics.js +++ b/demo/pre-post-entrys/google-analytics.js @@ -1 +1 @@ -console.log('google-analytics'); \ No newline at end of file +console.log('google-analytics'); diff --git a/demo/pre-post-entrys/pages/page1/index.js b/demo/pre-post-entrys/pages/page1/index.js index 2bdd9b6..e1403c8 100644 --- a/demo/pre-post-entrys/pages/page1/index.js +++ b/demo/pre-post-entrys/pages/page1/index.js @@ -1 +1 @@ -console.log('page1'); \ No newline at end of file +console.log('page1'); diff --git a/demo/pre-post-entrys/polyfill.js b/demo/pre-post-entrys/polyfill.js index e5a40d1..379c497 100644 --- a/demo/pre-post-entrys/polyfill.js +++ b/demo/pre-post-entrys/polyfill.js @@ -1 +1 @@ -console.log('polyfill'); \ No newline at end of file +console.log('polyfill'); diff --git a/demo/pre-post-entrys/webpack.config.js b/demo/pre-post-entrys/webpack.config.js index 6f9fe4d..435d412 100644 --- a/demo/pre-post-entrys/webpack.config.js +++ b/demo/pre-post-entrys/webpack.config.js @@ -7,13 +7,13 @@ module.exports = { filename: '[name].js', }, entry: { - 'polyfill': './polyfill', - 'google-analytics': './google-analytics' + polyfill: './polyfill', + 'google-analytics': './google-analytics', }, plugins: [ new AutoWebPlugin('./pages', { preEntrys: ['./polyfill'], - postEntrys: ['./google-analytics'] + postEntrys: ['./google-analytics'], }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/public-path/README.md b/demo/public-path/README.md index 1b37f6f..7efbbd4 100644 --- a/demo/public-path/README.md +++ b/demo/public-path/README.md @@ -1,30 +1,35 @@ -# 设置PublicPath -生产环境下最好把生产的JS和CSS发布到CDN上去，以加速你的网站加载速度。这时候你需要配置PublicPath。 -- 要配置JS文件的PublicPath，如下： +# 设置 PublicPath + +生产环境下最好把生产的 JS 和 CSS 发布到 CDN 上去，以加速你的网站加载速度。这时候你需要配置 PublicPath。 + +* 要配置 JS 文件的 PublicPath，如下： + ```js - module.exports = { - output: { - publicPath: '//js.cdn' - } - }; +module.exports = { + output: { + publicPath: '//js.cdn', + }, +}; ``` -- 要配置CSS文件的 PublicPath，如下： +* 要配置 CSS 文件的 PublicPath，如下： + ```js - new WebPlugin({ - stylePublicPath: '//css.cdn', - }) +new WebPlugin({ + stylePublicPath: '//css.cdn', +}); ``` -- 其他资源的 PublicPath，如下： +* 其他资源的 PublicPath，如下： + ```js { test: /\.css$/, - loaders: ExtractTextPlugin.extract({ + rules:ExtractTextPlugin.extract({ // 通过css加载的文件都放在9.url.cn publicPath: CND.img, fallback: 'style-loader', use: ['css-loader'], }), }, -``` \ No newline at end of file +``` diff --git a/demo/public-path/a.css b/demo/public-path/a.css index 65b8b80..8befe76 100644 --- a/demo/public-path/a.css +++ b/demo/public-path/a.css @@ -1,3 +1,3 @@ body { background-color: #fff; -} \ No newline at end of file +} diff --git a/demo/public-path/a.js b/demo/public-path/a.js index 506e2f3..d498288 100644 --- a/demo/public-path/a.js +++ b/demo/public-path/a.js @@ -1,2 +1,2 @@ console.lo('hello web-webpack-plugin from a'); -require('./a.css'); \ No newline at end of file +require('./a.css'); diff --git a/demo/public-path/b.css b/demo/public-path/b.css index b2196e2..0ca2592 100644 --- a/demo/public-path/b.css +++ b/demo/public-path/b.css @@ -1,3 +1,3 @@ body { background-color: #000; -} \ No newline at end of file +} diff --git a/demo/public-path/b.js b/demo/public-path/b.js index cc4597a..35d36f2 100644 --- a/demo/public-path/b.js +++ b/demo/public-path/b.js @@ -1,2 +1,2 @@ console.log('hello web-webpack-plugin from b'); -require('./b.css'); \ No newline at end of file +require('./b.css'); diff --git a/demo/public-path/dist/A.css b/demo/public-path/dist/A.css index 65b8b80..a756cd1 100644 --- a/demo/public-path/dist/A.css +++ b/demo/public-path/dist/A.css @@ -1,3 +1,4 @@ body { background-color: #fff; -} \ No newline at end of file +} + diff --git a/demo/public-path/dist/A.js b/demo/public-path/dist/A.js index 47a1dad..08cc599 100644 --- a/demo/public-path/dist/A.js +++ b/demo/public-path/dist/A.js @@ -1,80 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = "//js.cdn"; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports, __webpack_require__) { - -console.lo('hello web-webpack-plugin from a'); -__webpack_require__(1); - -/***/ }), -/* 1 */ -/***/ (function(module, exports) { - -// removed by extract-text-webpack-plugin - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="//js.cdn",t(t.s=5)}({4:function(e,n,t){},5:function(e,n,t){console.lo("hello web-webpack-plugin from a"),t(4)}}); \ No newline at end of file diff --git a/demo/public-path/dist/B.css b/demo/public-path/dist/B.css index b2196e2..14b367f 100644 --- a/demo/public-path/dist/B.css +++ b/demo/public-path/dist/B.css @@ -1,3 +1,4 @@ body { background-color: #000; -} \ No newline at end of file +} + diff --git a/demo/public-path/dist/B.js b/demo/public-path/dist/B.js index 28a8686..b1c509d 100644 --- a/demo/public-path/dist/B.js +++ b/demo/public-path/dist/B.js @@ -1,82 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = "//js.cdn"; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 2); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */, -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -console.log('hello web-webpack-plugin from b'); -__webpack_require__(3); - -/***/ }), -/* 3 */ -/***/ (function(module, exports) { - -// removed by extract-text-webpack-plugin - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="//js.cdn",t(t.s=2)}([,function(e,n,t){},function(e,n,t){console.log("hello web-webpack-plugin from b"),t(1)}]); \ No newline at end of file diff --git a/demo/public-path/webpack.config.js b/demo/public-path/webpack.config.js index 3970a84..dc4db0e 100644 --- a/demo/public-path/webpack.config.js +++ b/demo/public-path/webpack.config.js @@ -1,30 +1,27 @@ const path = require('path'); -const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { WebPlugin } = require('../../index'); module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: '[name].js', - publicPath: '//js.cdn' + publicPath: '//js.cdn', }, entry: { A: './a', B: './b', }, module: { - loaders: [ + rules: [ { test: /\.css$/, - loaders: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: ['css-loader'], - }), + loader: [MiniCssExtractPlugin.loader, 'css-loader'], }, - ] + ], }, plugins: [ - new ExtractTextPlugin({ + new MiniCssExtractPlugin({ filename: '[name].css', }), new WebPlugin({ @@ -32,5 +29,5 @@ module.exports = { template: './template.html', stylePublicPath: '//css.cdn', }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/relative-path-public-path/README.md b/demo/relative-path-public-path/README.md index 9bb792f..c1493e5 100644 --- a/demo/relative-path-public-path/README.md +++ b/demo/relative-path-public-path/README.md @@ -1,2 +1,3 @@ # calculate relative paths(with publicPath) -see [this issue](https://github.com/gwuhaolin/web-webpack-plugin/issues/4) \ No newline at end of file + +see [this issue](https://github.com/gwuhaolin/web-webpack-plugin/issues/4) diff --git a/demo/relative-path-public-path/a.css b/demo/relative-path-public-path/a.css index 65b8b80..8befe76 100644 --- a/demo/relative-path-public-path/a.css +++ b/demo/relative-path-public-path/a.css @@ -1,3 +1,3 @@ body { background-color: #fff; -} \ No newline at end of file +} diff --git a/demo/relative-path-public-path/a.js b/demo/relative-path-public-path/a.js index 61fb2f5..9240f01 100644 --- a/demo/relative-path-public-path/a.js +++ b/demo/relative-path-public-path/a.js @@ -1,3 +1,3 @@ console.lo('hello web-webpack-plugin from a'); require('./a.css'); -require('./resume.pdf'); \ No newline at end of file +require('./resume.pdf'); diff --git a/demo/relative-path-public-path/b.css b/demo/relative-path-public-path/b.css index b2196e2..0ca2592 100644 --- a/demo/relative-path-public-path/b.css +++ b/demo/relative-path-public-path/b.css @@ -1,3 +1,3 @@ body { background-color: #000; -} \ No newline at end of file +} diff --git a/demo/relative-path-public-path/b.js b/demo/relative-path-public-path/b.js index cc4597a..35d36f2 100644 --- a/demo/relative-path-public-path/b.js +++ b/demo/relative-path-public-path/b.js @@ -1,2 +1,2 @@ console.log('hello web-webpack-plugin from b'); -require('./b.css'); \ No newline at end of file +require('./b.css'); diff --git a/demo/relative-path-public-path/dist/css/A.css b/demo/relative-path-public-path/dist/A.css similarity index 91% rename from demo/relative-path-public-path/dist/css/A.css rename to demo/relative-path-public-path/dist/A.css index 65b8b80..a756cd1 100644 --- a/demo/relative-path-public-path/dist/css/A.css +++ b/demo/relative-path-public-path/dist/A.css @@ -1,3 +1,4 @@ body { background-color: #fff; -} \ No newline at end of file +} + diff --git a/demo/relative-path/dist/css/B.css b/demo/relative-path-public-path/dist/B.css similarity index 91% rename from demo/relative-path/dist/css/B.css rename to demo/relative-path-public-path/dist/B.css index b2196e2..14b367f 100644 --- a/demo/relative-path/dist/css/B.css +++ b/demo/relative-path-public-path/dist/B.css @@ -1,3 +1,4 @@ body { background-color: #000; -} \ No newline at end of file +} + diff --git a/demo/relative-path-public-path/dist/README.md b/demo/relative-path-public-path/dist/README.md index 9bb792f..c1493e5 100644 --- a/demo/relative-path-public-path/dist/README.md +++ b/demo/relative-path-public-path/dist/README.md @@ -1,2 +1,3 @@ # calculate relative paths(with publicPath) -see [this issue](https://github.com/gwuhaolin/web-webpack-plugin/issues/4) \ No newline at end of file + +see [this issue](https://github.com/gwuhaolin/web-webpack-plugin/issues/4) diff --git a/demo/relative-path-public-path/dist/html/index.html b/demo/relative-path-public-path/dist/html/index.html index 3f0cff6..8a92853 100644 --- a/demo/relative-path-public-path/dist/html/index.html +++ b/demo/relative-path-public-path/dist/html/index.html @@ -3,8 +3,8 @@ - - + + diff --git a/demo/relative-path-public-path/dist/js/A.js b/demo/relative-path-public-path/dist/js/A.js index 1ca5f3b..24f8202 100644 --- a/demo/relative-path-public-path/dist/js/A.js +++ b/demo/relative-path-public-path/dist/js/A.js @@ -1,87 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = "//cdn.cn/"; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports, __webpack_require__) { - -console.lo('hello web-webpack-plugin from a'); -__webpack_require__(1); -__webpack_require__(2); - -/***/ }), -/* 1 */ -/***/ (function(module, exports) { - -// removed by extract-text-webpack-plugin - -/***/ }), -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__.p + "img/resume_c527df321483df995119f1cfa5ccbcf8.pdf"; - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="//cdn.cn/",t(t.s=6)}([,,,function(e,n,t){e.exports=t.p+"img/resume_c527df321483df995119f1cfa5ccbcf8.pdf"},,function(e,n,t){},function(e,n,t){console.lo("hello web-webpack-plugin from a"),t(5),t(3)}]); \ No newline at end of file diff --git a/demo/relative-path-public-path/dist/js/B.js b/demo/relative-path-public-path/dist/js/B.js index 1ad41a7..84991d9 100644 --- a/demo/relative-path-public-path/dist/js/B.js +++ b/demo/relative-path-public-path/dist/js/B.js @@ -1,83 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = "//cdn.cn/"; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 3); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */, -/* 2 */, -/* 3 */ -/***/ (function(module, exports, __webpack_require__) { - -console.log('hello web-webpack-plugin from b'); -__webpack_require__(4); - -/***/ }), -/* 4 */ -/***/ (function(module, exports) { - -// removed by extract-text-webpack-plugin - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="//cdn.cn/",t(t.s=2)}([,function(e,n,t){},function(e,n,t){console.log("hello web-webpack-plugin from b"),t(1)}]); \ No newline at end of file diff --git a/demo/relative-path-public-path/webpack.config.js b/demo/relative-path-public-path/webpack.config.js index 01eb17f..dc00c04 100644 --- a/demo/relative-path-public-path/webpack.config.js +++ b/demo/relative-path-public-path/webpack.config.js @@ -1,25 +1,22 @@ const path = require('path'); -const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { WebPlugin } = require('../../index'); module.exports = { output: { path: path.resolve(__dirname, 'dist'), filename: 'js/[name].js', - publicPath: '//cdn.cn/' + publicPath: '//cdn.cn/', }, entry: { A: './a', B: './b', }, module: { - loaders: [ + rules: [ { test: /\.css$/, - loaders: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: ['css-loader'], - }), + loader: [MiniCssExtractPlugin.loader, 'css-loader'], }, { test: /\.(pdf)$/, @@ -28,15 +25,15 @@ module.exports = { name: 'img/[name]_[hash].[ext]', }, }, - ] + ], }, plugins: [ - new ExtractTextPlugin({ - filename: 'css/[name].css', + new MiniCssExtractPlugin({ + filename: '[name].css', }), new WebPlugin({ filename: 'html/index.html', template: './template.html', }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/relative-path/README.md b/demo/relative-path/README.md index e403775..1e7dccc 100644 --- a/demo/relative-path/README.md +++ b/demo/relative-path/README.md @@ -1,2 +1,3 @@ # calculate relative paths -see [this issue](https://github.com/gwuhaolin/web-webpack-plugin/issues/4) \ No newline at end of file + +see [this issue](https://github.com/gwuhaolin/web-webpack-plugin/issues/4) diff --git a/demo/relative-path/a.css b/demo/relative-path/a.css index 65b8b80..8befe76 100644 --- a/demo/relative-path/a.css +++ b/demo/relative-path/a.css @@ -1,3 +1,3 @@ body { background-color: #fff; -} \ No newline at end of file +} diff --git a/demo/relative-path/a.js b/demo/relative-path/a.js index 61fb2f5..9240f01 100644 --- a/demo/relative-path/a.js +++ b/demo/relative-path/a.js @@ -1,3 +1,3 @@ console.lo('hello web-webpack-plugin from a'); require('./a.css'); -require('./resume.pdf'); \ No newline at end of file +require('./resume.pdf'); diff --git a/demo/relative-path/b.css b/demo/relative-path/b.css index b2196e2..0ca2592 100644 --- a/demo/relative-path/b.css +++ b/demo/relative-path/b.css @@ -1,3 +1,3 @@ body { background-color: #000; -} \ No newline at end of file +} diff --git a/demo/relative-path/b.js b/demo/relative-path/b.js index cc4597a..35d36f2 100644 --- a/demo/relative-path/b.js +++ b/demo/relative-path/b.js @@ -1,2 +1,2 @@ console.log('hello web-webpack-plugin from b'); -require('./b.css'); \ No newline at end of file +require('./b.css'); diff --git a/demo/relative-path/dist/css/A.css b/demo/relative-path/dist/A.css similarity index 91% rename from demo/relative-path/dist/css/A.css rename to demo/relative-path/dist/A.css index 65b8b80..a756cd1 100644 --- a/demo/relative-path/dist/css/A.css +++ b/demo/relative-path/dist/A.css @@ -1,3 +1,4 @@ body { background-color: #fff; -} \ No newline at end of file +} + diff --git a/demo/relative-path-public-path/dist/css/B.css b/demo/relative-path/dist/B.css similarity index 91% rename from demo/relative-path-public-path/dist/css/B.css rename to demo/relative-path/dist/B.css index b2196e2..14b367f 100644 --- a/demo/relative-path-public-path/dist/css/B.css +++ b/demo/relative-path/dist/B.css @@ -1,3 +1,4 @@ body { background-color: #000; -} \ No newline at end of file +} + diff --git a/demo/relative-path/dist/README.md b/demo/relative-path/dist/README.md index e403775..1e7dccc 100644 --- a/demo/relative-path/dist/README.md +++ b/demo/relative-path/dist/README.md @@ -1,2 +1,3 @@ # calculate relative paths -see [this issue](https://github.com/gwuhaolin/web-webpack-plugin/issues/4) \ No newline at end of file + +see [this issue](https://github.com/gwuhaolin/web-webpack-plugin/issues/4) diff --git a/demo/relative-path/dist/html/index.html b/demo/relative-path/dist/html/index.html index 314b9f2..ed9f7ff 100644 --- a/demo/relative-path/dist/html/index.html +++ b/demo/relative-path/dist/html/index.html @@ -3,8 +3,8 @@ - - + + diff --git a/demo/relative-path/dist/js/A.js b/demo/relative-path/dist/js/A.js index e893149..ebc3814 100644 --- a/demo/relative-path/dist/js/A.js +++ b/demo/relative-path/dist/js/A.js @@ -1,87 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports, __webpack_require__) { - -console.lo('hello web-webpack-plugin from a'); -__webpack_require__(1); -__webpack_require__(2); - -/***/ }), -/* 1 */ -/***/ (function(module, exports) { - -// removed by extract-text-webpack-plugin - -/***/ }), -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__.p + "img/resume_c527df321483df995119f1cfa5ccbcf8.pdf"; - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=6)}([,,,function(e,t,n){e.exports=n.p+"img/resume_c527df321483df995119f1cfa5ccbcf8.pdf"},,function(e,t,n){},function(e,t,n){console.lo("hello web-webpack-plugin from a"),n(5),n(3)}]); \ No newline at end of file diff --git a/demo/relative-path/dist/js/B.js b/demo/relative-path/dist/js/B.js index bb31eae..5af6ea8 100644 --- a/demo/relative-path/dist/js/B.js +++ b/demo/relative-path/dist/js/B.js @@ -1,83 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 3); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */, -/* 2 */, -/* 3 */ -/***/ (function(module, exports, __webpack_require__) { - -console.log('hello web-webpack-plugin from b'); -__webpack_require__(4); - -/***/ }), -/* 4 */ -/***/ (function(module, exports) { - -// removed by extract-text-webpack-plugin - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=2)}([,function(e,t,n){},function(e,t,n){console.log("hello web-webpack-plugin from b"),n(1)}]); \ No newline at end of file diff --git a/demo/relative-path/webpack.config.js b/demo/relative-path/webpack.config.js index cbcfc4b..5003137 100644 --- a/demo/relative-path/webpack.config.js +++ b/demo/relative-path/webpack.config.js @@ -1,5 +1,5 @@ const path = require('path'); -const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const { WebPlugin } = require('../../index'); module.exports = { @@ -13,13 +13,10 @@ module.exports = { B: './b', }, module: { - loaders: [ + rules: [ { test: /\.css$/, - loaders: ExtractTextPlugin.extract({ - fallback: 'style-loader', - use: ['css-loader'], - }), + loader: [MiniCssExtractPlugin.loader, 'css-loader'], }, { test: /\.(pdf)$/, @@ -28,15 +25,15 @@ module.exports = { name: 'img/[name]_[hash].[ext]', }, }, - ] + ], }, plugins: [ - new ExtractTextPlugin({ - filename: 'css/[name].css', + new MiniCssExtractPlugin({ + filename: '[name].css', }), new WebPlugin({ filename: 'html/index.html', template: './template.html', }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/use-template-complier/README.md b/demo/use-template-complier/README.md index dedef83..2c1d6c3 100644 --- a/demo/use-template-complier/README.md +++ b/demo/use-template-complier/README.md @@ -1,20 +1,20 @@ # 预编译模版 -在[一些场景下](https://github.com/gwuhaolin/web-webpack-plugin/issues/6)，你可能需要使用模版引擎预处理模版后再交给 `web-webpack-plugin` 去处理， -要使用模版引擎需要使用`templateCompiler`属性，`WebPlugin` 和 `AutoWebPlugin` 都支持，具体使用如下： +在[一些场景下](https://github.com/gwuhaolin/web-webpack-plugin/issues/6)，你可能需要使用模版引擎预处理模版后再交给 `web-webpack-plugin` 去处理，要使用模版引擎需要使用`templateCompiler`属性，`WebPlugin` 和 `AutoWebPlugin` 都支持，具体使用如下： + ```js const autoPlugin = new AutoWebPlugin('./pages', { template: './template.ejs', // 定义一个函数，告诉你当前页面的 pageName 和 使用的模版的 文件完整路径 templateFullPath，你返回一个模版引擎处理后的HTML字符串内容。 - templateCompiler: function (pageName, templateFullPath) { + templateCompiler: function(pageName, templateFullPath) { const ejsTemplate = fs.readFileSync(templateFullPath, { encoding: 'utf8', }); return ejs.render(ejsTemplate, { title: pageName, }); - } + }, }); ``` -对于`WebPlugin`用法和`AutoWebPlugin`完全一样。 +对于`WebPlugin`用法和`AutoWebPlugin`完全一样。 diff --git a/demo/use-template-complier/dist/a.html b/demo/use-template-complier/dist/a.html index afdf851..4950061 100644 --- a/demo/use-template-complier/dist/a.html +++ b/demo/use-template-complier/dist/a.html @@ -4,8 +4,9 @@ + background-color: rebeccapurple; +} + a diff --git a/demo/use-template-complier/dist/a.js b/demo/use-template-complier/dist/a.js index 3c836ee..d1ec862 100644 --- a/demo/use-template-complier/dist/a.js +++ b/demo/use-template-complier/dist/a.js @@ -1,80 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__(1); - - -/***/ }), -/* 1 */ -/***/ (function(module, exports) { - -console.lo('hello web-webpack-plugin from a'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([,,function(e,t){console.lo("hello web-webpack-plugin from a")},function(e,t,n){e.exports=n(2)}]); \ No newline at end of file diff --git a/demo/use-template-complier/dist/b.html b/demo/use-template-complier/dist/b.html index 2f39332..b5204a2 100644 --- a/demo/use-template-complier/dist/b.html +++ b/demo/use-template-complier/dist/b.html @@ -4,8 +4,9 @@ + background-color: rebeccapurple; +} + b diff --git a/demo/use-template-complier/dist/b.js b/demo/use-template-complier/dist/b.js index 797a73e..b368804 100644 --- a/demo/use-template-complier/dist/b.js +++ b/demo/use-template-complier/dist/b.js @@ -1,82 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 2); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */, -/* 2 */ -/***/ (function(module, exports, __webpack_require__) { - -module.exports = __webpack_require__(3); - - -/***/ }), -/* 3 */ -/***/ (function(module, exports) { - -console.log('hello web-webpack-plugin from b'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([function(e,t){console.log("hello web-webpack-plugin from b")},function(e,t,n){e.exports=n(0)}]); \ No newline at end of file diff --git a/demo/use-template-complier/dist/google-analyze.js b/demo/use-template-complier/dist/google-analyze.js index 8a88559..975d1b1 100644 --- a/demo/use-template-complier/dist/google-analyze.js +++ b/demo/use-template-complier/dist/google-analyze.js @@ -1 +1 @@ -console.log('GA'); \ No newline at end of file +console.log('GA'); diff --git a/demo/use-template-complier/google-analyze.js b/demo/use-template-complier/google-analyze.js index 8a88559..975d1b1 100644 --- a/demo/use-template-complier/google-analyze.js +++ b/demo/use-template-complier/google-analyze.js @@ -1 +1 @@ -console.log('GA'); \ No newline at end of file +console.log('GA'); diff --git a/demo/use-template-complier/pages/a/index.js b/demo/use-template-complier/pages/a/index.js index 2c77bbc..1686986 100644 --- a/demo/use-template-complier/pages/a/index.js +++ b/demo/use-template-complier/pages/a/index.js @@ -1 +1 @@ -console.lo('hello web-webpack-plugin from a'); \ No newline at end of file +console.lo('hello web-webpack-plugin from a'); diff --git a/demo/use-template-complier/pages/b/index.js b/demo/use-template-complier/pages/b/index.js index 8734a79..de1684a 100644 --- a/demo/use-template-complier/pages/b/index.js +++ b/demo/use-template-complier/pages/b/index.js @@ -1 +1 @@ -console.log('hello web-webpack-plugin from b'); \ No newline at end of file +console.log('hello web-webpack-plugin from b'); diff --git a/demo/use-template-complier/reset.min.css b/demo/use-template-complier/reset.min.css index 7cf2d40..d59099d 100644 --- a/demo/use-template-complier/reset.min.css +++ b/demo/use-template-complier/reset.min.css @@ -1,3 +1,3 @@ body { - background-color: rebeccapurple; -} \ No newline at end of file + background-color: rebeccapurple; +} diff --git a/demo/use-template-complier/webpack.config.js b/demo/use-template-complier/webpack.config.js index f9202b4..503a1e1 100644 --- a/demo/use-template-complier/webpack.config.js +++ b/demo/use-template-complier/webpack.config.js @@ -5,15 +5,15 @@ const { AutoWebPlugin } = require('../../index'); const autoPlugin = new AutoWebPlugin('./pages', { template: './template.ejs', - templateCompiler: function (pageName, templateFullPath) { + templateCompiler: function(pageName, templateFullPath) { const ejsTemplate = fs.readFileSync(templateFullPath, { encoding: 'utf8', }); return ejs.render(ejsTemplate, { title: pageName, - filename: './template.ejs' + filename: './template.ejs', }); - } + }, }); module.exports = { @@ -22,7 +22,5 @@ module.exports = { filename: '[name].js', }, entry: autoPlugin.entry(), - plugins: [ - autoPlugin, - ] -}; \ No newline at end of file + plugins: [autoPlugin], +}; diff --git a/demo/use-template/README.md b/demo/use-template/README.md index 59e6aa9..653b269 100644 --- a/demo/use-template/README.md +++ b/demo/use-template/README.md @@ -1,6 +1,8 @@ -# 使用HTML模版配置资源注入到HTML -通过配置webpack的entry，webpack为我们生产了一系列chunk。但是我们需要把这些chunk注入到HTML里才可以在浏览器里运行起来。 -`WebPlugin`可以方便的帮你把chunk注入到HTML里。 +# 使用 HTML 模版配置资源注入到 HTML + +通过配置 webpack 的 entry，webpack 为我们生产了一系列 chunk。但是我们需要把这些 chunk 注入到 HTML 里才可以在浏览器里运行起来。 +`WebPlugin`可以方便的帮你把 chunk 注入到 HTML 里。 + ```js new WebPlugin({ filename: 'index.html', @@ -9,16 +11,16 @@ }), ``` - -使用HTML模版可以更细粒度的控制chunk的注入位置。同时你还可以控制每个chunk注入到HTML里的方式，通过`?_inline&_dev`这样querystring的方式来配置属性。 +使用 HTML 模版可以更细粒度的控制 chunk 的注入位置。同时你还可以控制每个 chunk 注入到 HTML 里的方式，通过`?_inline&_dev`这样 querystring 的方式来配置属性。 支持以下注入方式 -- `_dist` 只有在生产环境下才引入该资源 -- `_dev` 只有在开发环境下才引入该资源 -- `_inline` 把该资源的内容潜入到html里 -- `_ie` 只有IE浏览器才需要引入的资源，通过 `[if IE]>resourceresource` 所在的位置，`` 不存在是注入到BODY标签的最后。 -- 剩余的所有CSS注入到 `` 所在的位置，`` 不存在是注入到HEAD标签的最后。 \ No newline at end of file +* 剩余的所有 JS 注入到 `` 所在的位置，`` 不存在是注入到 BODY 标签的最后。 +* 剩余的所有 CSS 注入到 `` 所在的位置，`` 不存在是注入到 HEAD 标签的最后。 diff --git a/demo/use-template/a.js b/demo/use-template/a.js index 2c77bbc..1686986 100644 --- a/demo/use-template/a.js +++ b/demo/use-template/a.js @@ -1 +1 @@ -console.lo('hello web-webpack-plugin from a'); \ No newline at end of file +console.lo('hello web-webpack-plugin from a'); diff --git a/demo/use-template/b.js b/demo/use-template/b.js index 8734a79..de1684a 100644 --- a/demo/use-template/b.js +++ b/demo/use-template/b.js @@ -1 +1 @@ -console.log('hello web-webpack-plugin from b'); \ No newline at end of file +console.log('hello web-webpack-plugin from b'); diff --git a/demo/use-template/dist/A.js b/demo/use-template/dist/A.js index 13b82d1..9a273fc 100644 --- a/demo/use-template/dist/A.js +++ b/demo/use-template/dist/A.js @@ -1,73 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports) { - -console.lo('hello web-webpack-plugin from a'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=1)}([,function(e,t){console.lo("hello web-webpack-plugin from a")}]); \ No newline at end of file diff --git a/demo/use-template/dist/B.js b/demo/use-template/dist/B.js index 0317fe9..14d6e5f 100644 --- a/demo/use-template/dist/B.js +++ b/demo/use-template/dist/B.js @@ -1,74 +1 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 1); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */ -/***/ (function(module, exports) { - -console.log('hello web-webpack-plugin from b'); - -/***/ }) -/******/ ]); \ No newline at end of file +!function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t){console.log("hello web-webpack-plugin from b")}]); \ No newline at end of file diff --git a/demo/use-template/dist/google-analyze.js b/demo/use-template/dist/google-analyze.js index 8a88559..975d1b1 100644 --- a/demo/use-template/dist/google-analyze.js +++ b/demo/use-template/dist/google-analyze.js @@ -1 +1 @@ -console.log('GA'); \ No newline at end of file +console.log('GA'); diff --git a/demo/use-template/dist/index.html b/demo/use-template/dist/index.html index fc3993b..5d72115 100644 --- a/demo/use-template/dist/index.html +++ b/demo/use-template/dist/index.html @@ -7,8 +7,9 @@ + background-color: rebeccapurple; +} + diff --git a/demo/use-template/google-analyze.js b/demo/use-template/google-analyze.js index 8a88559..975d1b1 100644 --- a/demo/use-template/google-analyze.js +++ b/demo/use-template/google-analyze.js @@ -1 +1 @@ -console.log('GA'); \ No newline at end of file +console.log('GA'); diff --git a/demo/use-template/reset.min.css b/demo/use-template/reset.min.css index 7cf2d40..d59099d 100644 --- a/demo/use-template/reset.min.css +++ b/demo/use-template/reset.min.css @@ -1,3 +1,3 @@ body { - background-color: rebeccapurple; -} \ No newline at end of file + background-color: rebeccapurple; +} diff --git a/demo/use-template/webpack.config.js b/demo/use-template/webpack.config.js index 81ee923..93a3bb3 100644 --- a/demo/use-template/webpack.config.js +++ b/demo/use-template/webpack.config.js @@ -16,5 +16,5 @@ module.exports = { template: './template.html', requires: ['A', 'B'], }), - ] -}; \ No newline at end of file + ], +}; diff --git a/demo/watch-template/README.md b/demo/watch-template/README.md index ed17d41..c6a1f2e 100644 --- a/demo/watch-template/README.md +++ b/demo/watch-template/README.md @@ -1 +1 @@ -# 编辑HTML模版时，监听模式下会自动编译和刷新 \ No newline at end of file +# 编辑 HTML 模版时，监听模式下会自动编译和刷新 diff --git a/demo/watch-template/a.js b/demo/watch-template/a.js index 2c77bbc..1686986 100644 --- a/demo/watch-template/a.js +++ b/demo/watch-template/a.js @@ -1 +1 @@ -console.lo('hello web-webpack-plugin from a'); \ No newline at end of file +console.lo('hello web-webpack-plugin from a'); diff --git a/demo/watch-template/b.js b/demo/watch-template/b.js index 8734a79..de1684a 100644 --- a/demo/watch-template/b.js +++ b/demo/watch-template/b.js @@ -1 +1 @@ -console.log('hello web-webpack-plugin from b'); \ No newline at end of file +console.log('hello web-webpack-plugin from b'); diff --git a/demo/watch-template/dist/A.js b/demo/watch-template/dist/A.js index 13b82d1..0928826 100644 --- a/demo/watch-template/dist/A.js +++ b/demo/watch-template/dist/A.js @@ -1,73 +1,84 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 0); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */ -/***/ (function(module, exports) { +/******/ (function(modules) { + // webpackBootstrap + /******/ // The module cache + /******/ var installedModules = {}; // The require function + /******/ + /******/ /******/ function __webpack_require__(moduleId) { + /******/ + /******/ // Check if module is in cache + /******/ if (installedModules[moduleId]) { + /******/ return installedModules[moduleId].exports; + /******/ + } // Create a new module (and put it into the cache) + /******/ /******/ var module = (installedModules[moduleId] = { + /******/ i: moduleId, + /******/ l: false, + /******/ exports: {}, + /******/ + }); // Execute the module function + /******/ + /******/ /******/ modules[moduleId].call( + module.exports, + module, + module.exports, + __webpack_require__ + ); // Flag the module as loaded + /******/ + /******/ /******/ module.l = true; // Return the exports of the module + /******/ + /******/ /******/ return module.exports; + /******/ + } // expose the modules object (__webpack_modules__) + /******/ + /******/ + /******/ /******/ __webpack_require__.m = modules; // expose the module cache + /******/ + /******/ /******/ __webpack_require__.c = installedModules; // define getter function for harmony exports + /******/ + /******/ /******/ __webpack_require__.d = function(exports, name, getter) { + /******/ if (!__webpack_require__.o(exports, name)) { + /******/ Object.defineProperty(exports, name, { + /******/ configurable: false, + /******/ enumerable: true, + /******/ get: getter, + /******/ + }); + /******/ + } + /******/ + }; // getDefaultExport function for compatibility with non-harmony modules + /******/ + /******/ /******/ __webpack_require__.n = function(module) { + /******/ var getter = + module && module.__esModule + ? /******/ function getDefault() { + return module['default']; + } + : /******/ function getModuleExports() { + return module; + }; + /******/ __webpack_require__.d(getter, 'a', getter); + /******/ return getter; + /******/ + }; // Object.prototype.hasOwnProperty.call + /******/ + /******/ /******/ __webpack_require__.o = function(object, property) { + return Object.prototype.hasOwnProperty.call(object, property); + }; // __webpack_public_path__ + /******/ + /******/ /******/ __webpack_require__.p = ''; // Load entry module and return exports + /******/ + /******/ /******/ return __webpack_require__((__webpack_require__.s = 0)); + /******/ +})( + /************************************************************************/ + /******/ [ + /* 0 */ + /***/ function(module, exports) { + console.lo('hello web-webpack-plugin from a'); -console.lo('hello web-webpack-plugin from a'); - -/***/ }) -/******/ ]); \ No newline at end of file + /***/ + }, + /******/ + ] +); diff --git a/demo/watch-template/dist/B.js b/demo/watch-template/dist/B.js index 0317fe9..b62d718 100644 --- a/demo/watch-template/dist/B.js +++ b/demo/watch-template/dist/B.js @@ -1,74 +1,85 @@ -/******/ (function(modules) { // webpackBootstrap -/******/ // The module cache -/******/ var installedModules = {}; -/******/ -/******/ // The require function -/******/ function __webpack_require__(moduleId) { -/******/ -/******/ // Check if module is in cache -/******/ if(installedModules[moduleId]) { -/******/ return installedModules[moduleId].exports; -/******/ } -/******/ // Create a new module (and put it into the cache) -/******/ var module = installedModules[moduleId] = { -/******/ i: moduleId, -/******/ l: false, -/******/ exports: {} -/******/ }; -/******/ -/******/ // Execute the module function -/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); -/******/ -/******/ // Flag the module as loaded -/******/ module.l = true; -/******/ -/******/ // Return the exports of the module -/******/ return module.exports; -/******/ } -/******/ -/******/ -/******/ // expose the modules object (__webpack_modules__) -/******/ __webpack_require__.m = modules; -/******/ -/******/ // expose the module cache -/******/ __webpack_require__.c = installedModules; -/******/ -/******/ // define getter function for harmony exports -/******/ __webpack_require__.d = function(exports, name, getter) { -/******/ if(!__webpack_require__.o(exports, name)) { -/******/ Object.defineProperty(exports, name, { -/******/ configurable: false, -/******/ enumerable: true, -/******/ get: getter -/******/ }); -/******/ } -/******/ }; -/******/ -/******/ // getDefaultExport function for compatibility with non-harmony modules -/******/ __webpack_require__.n = function(module) { -/******/ var getter = module && module.__esModule ? -/******/ function getDefault() { return module['default']; } : -/******/ function getModuleExports() { return module; }; -/******/ __webpack_require__.d(getter, 'a', getter); -/******/ return getter; -/******/ }; -/******/ -/******/ // Object.prototype.hasOwnProperty.call -/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); }; -/******/ -/******/ // __webpack_public_path__ -/******/ __webpack_require__.p = ""; -/******/ -/******/ // Load entry module and return exports -/******/ return __webpack_require__(__webpack_require__.s = 1); -/******/ }) -/************************************************************************/ -/******/ ([ -/* 0 */, -/* 1 */ -/***/ (function(module, exports) { +/******/ (function(modules) { + // webpackBootstrap + /******/ // The module cache + /******/ var installedModules = {}; // The require function + /******/ + /******/ /******/ function __webpack_require__(moduleId) { + /******/ + /******/ // Check if module is in cache + /******/ if (installedModules[moduleId]) { + /******/ return installedModules[moduleId].exports; + /******/ + } // Create a new module (and put it into the cache) + /******/ /******/ var module = (installedModules[moduleId] = { + /******/ i: moduleId, + /******/ l: false, + /******/ exports: {}, + /******/ + }); // Execute the module function + /******/ + /******/ /******/ modules[moduleId].call( + module.exports, + module, + module.exports, + __webpack_require__ + ); // Flag the module as loaded + /******/ + /******/ /******/ module.l = true; // Return the exports of the module + /******/ + /******/ /******/ return module.exports; + /******/ + } // expose the modules object (__webpack_modules__) + /******/ + /******/ + /******/ /******/ __webpack_require__.m = modules; // expose the module cache + /******/ + /******/ /******/ __webpack_require__.c = installedModules; // define getter function for harmony exports + /******/ + /******/ /******/ __webpack_require__.d = function(exports, name, getter) { + /******/ if (!__webpack_require__.o(exports, name)) { + /******/ Object.defineProperty(exports, name, { + /******/ configurable: false, + /******/ enumerable: true, + /******/ get: getter, + /******/ + }); + /******/ + } + /******/ + }; // getDefaultExport function for compatibility with non-harmony modules + /******/ + /******/ /******/ __webpack_require__.n = function(module) { + /******/ var getter = + module && module.__esModule + ? /******/ function getDefault() { + return module['default']; + } + : /******/ function getModuleExports() { + return module; + }; + /******/ __webpack_require__.d(getter, 'a', getter); + /******/ return getter; + /******/ + }; // Object.prototype.hasOwnProperty.call + /******/ + /******/ /******/ __webpack_require__.o = function(object, property) { + return Object.prototype.hasOwnProperty.call(object, property); + }; // __webpack_public_path__ + /******/ + /******/ /******/ __webpack_require__.p = ''; // Load entry module and return exports + /******/ + /******/ /******/ return __webpack_require__((__webpack_require__.s = 1)); + /******/ +})( + /************************************************************************/ + /******/ [ + , + /* 0 */ /* 1 */ + /***/ function(module, exports) { + console.log('hello web-webpack-plugin from b'); -console.log('hello web-webpack-plugin from b'); - -/***/ }) -/******/ ]); \ No newline at end of file + /***/ + }, + /******/ + ] +); diff --git a/demo/watch-template/dist/google-analyze.js b/demo/watch-template/dist/google-analyze.js index 8a88559..975d1b1 100644 --- a/demo/watch-template/dist/google-analyze.js +++ b/demo/watch-template/dist/google-analyze.js @@ -1 +1 @@ -console.log('GA'); \ No newline at end of file +console.log('GA'); diff --git a/demo/watch-template/google-analyze.js b/demo/watch-template/google-analyze.js index 8a88559..975d1b1 100644 --- a/demo/watch-template/google-analyze.js +++ b/demo/watch-template/google-analyze.js @@ -1 +1 @@ -console.log('GA'); \ No newline at end of file +console.log('GA'); diff --git a/demo/watch-template/reset.min.css b/demo/watch-template/reset.min.css index 7cf2d40..d59099d 100644 --- a/demo/watch-template/reset.min.css +++ b/demo/watch-template/reset.min.css @@ -1,3 +1,3 @@ body { - background-color: rebeccapurple; -} \ No newline at end of file + background-color: rebeccapurple; +} diff --git a/demo/watch-template/webpack.config.js b/demo/watch-template/webpack.config.js index 81ee923..93a3bb3 100644 --- a/demo/watch-template/webpack.config.js +++ b/demo/watch-template/webpack.config.js @@ -16,5 +16,5 @@ module.exports = { template: './template.html', requires: ['A', 'B'], }), - ] -}; \ No newline at end of file + ], +}; diff --git a/index.js b/index.js index babab49..c462653 100644 --- a/index.js +++ b/index.js @@ -1,2 +1,2 @@ exports.WebPlugin = require('./lib/WebPlugin'); -exports.AutoWebPlugin = require('./lib/AutoWebPlugin'); \ No newline at end of file +exports.AutoWebPlugin = require('./lib/AutoWebPlugin'); diff --git a/lib/AutoWebPlugin.js b/lib/AutoWebPlugin.js index 593ad2f..f84e167 100644 --- a/lib/AutoWebPlugin.js +++ b/lib/AutoWebPlugin.js @@ -1,7 +1,6 @@ const fs = require('fs'); const url = require('url'); const path = require('path'); -const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin'); const WebPlugin = require('./WebPlugin'); const util = require('./util'); @@ -14,10 +13,10 @@ const util = require('./util'); function getDirsInDir(dir, ignorePages = []) { const files = fs.readdirSync(dir); const ret = []; - files.forEach(fileName => { + files.forEach((fileName) => { if ( - ignorePages.findIndex(em => em === fileName) < 0 // not in ignorePages - && fs.lstatSync(path.resolve(dir, fileName)).isDirectory() // is Directory + ignorePages.findIndex((em) => em === fileName) < 0 && // not in ignorePages + fs.lstatSync(path.resolve(dir, fileName)).isDirectory() // is Directory ) { ret.push(fileName); } @@ -26,7 +25,6 @@ function getDirsInDir(dir, ignorePages = []) { } class AutoWebPlugin { - /** * * @param pageDir the dir hold all pages @@ -49,11 +47,6 @@ class AutoWebPlugin { * get WebPlugin output filename,default filename is pageName * set options.filename as function(pageName)=>filename to add custom logic * - * options.commonsChunk {Object} - * CommonsChunkPlugin options for all pages entry find by AutoWebPlugin. - * if this is null will not do commonsChunk action - * use CommonsChunkPlugin to handle with all pages's commons chunk. this will set CommonsChunkPlugin's chunks prop with all pages find by AutoWebPlugin. - * * options.preEntrys {Array} * entry files pre append to page entry for every page * @@ -69,19 +62,27 @@ class AutoWebPlugin { * options.outputPagemap {boolean} * whether output a pagemap.json file which contain all pages has been resolved with AutoWebPlugin in this way: * { - * "page name": "page url", - * ... - * } + * "page name": "page url", + * ... + * } */ constructor(pageDir, options) { options = Object.assign({}, options); this.options = options; this.entryMap = {}; this.webpackEntry = {}; - const {template, templateCompiler, entry, filename, ignorePages, preEntrys, postEntrys,} = options; + const { + template, + templateCompiler, + entry, + filename, + ignorePages, + preEntrys, + postEntrys, + } = options; const pageNames = getDirsInDir(pageDir, ignorePages); // find out all page entry in pageDir,and get every page's html template path and js entryPath - pageNames.forEach(pageName => { + pageNames.forEach((pageName) => { let templatePath; let entryPath; let htmlOutputFilename; @@ -120,7 +121,7 @@ class AutoWebPlugin { templateCompiler, entryPath, htmlOutputFilename, - } + }; let pageEntryArray = [entryPath]; if (Array.isArray(preEntrys)) { @@ -139,49 +140,48 @@ class AutoWebPlugin { global._isExtractStyle = util.isExtractStyle(compiler); const { options: compilerOptions } = compiler; const { entryMap } = this; - const { commonsChunk, stylePublicPath, outputPagemap, htmlMinify } = this.options; - - const useCommonsChunk = commonsChunk !== null && typeof commonsChunk === 'object'; + const { stylePublicPath, outputPagemap, htmlMinify } = this.options; - Object.keys(entryMap).forEach(pageName => { + Object.keys(entryMap).forEach((pageName) => { // ensure entryMap from pages has been add to webpack entry // webpack-dev-server may modify compilerOptions.entry, e.g add webpack-dev-server/client to every entry - compilerOptions.entry = Object.assign(this.webpackEntry, compilerOptions.entry); + compilerOptions.entry = Object.assign( + this.webpackEntry, + compilerOptions.entry + ); // add an WebPlugin for every page to output an html - const {templatePath, templateCompiler, htmlOutputFilename} = entryMap[pageName]; + const { templatePath, templateCompiler, htmlOutputFilename } = entryMap[ + pageName + ]; new WebPlugin({ template: templatePath, templateCompiler, pageName, filename: `${htmlOutputFilename}.html`, - requires: useCommonsChunk ? [commonsChunk.name, pageName] : [pageName], + requires: [pageName], stylePublicPath, htmlMinify, }).apply(compiler); }); - if (useCommonsChunk) { - const commonsChunkPluginOption = { - // get all pages's commons chunk - chunks: Object.keys(entryMap) - }; - Object.assign(commonsChunkPluginOption, commonsChunk); - - new CommonsChunkPlugin(commonsChunkPluginOption).apply(compiler); - } - // logic for pagemap.json - compiler.plugin('emit', (compilation, callback) => { + compiler.hooks.emit.tap('AutoWebPlugin', (compilation) => { if (outputPagemap) { const publicPath = util.getPublicPath(compilation); const outJson = {}; - Object.keys(this.entryMap).forEach(name => { - outJson[name] = url.resolve(publicPath, `${this.entryMap[name].htmlOutputFilename}.html`); + Object.keys(this.entryMap).forEach((name) => { + outJson[name] = url.resolve( + publicPath, + `${this.entryMap[name].htmlOutputFilename}.html` + ); }); - util.addFileToWebpackOutput(compilation, 'pagemap.json', JSON.stringify(outJson)); + util.addFileToWebpackOutput( + compilation, + 'pagemap.json', + JSON.stringify(outJson) + ); } - callback(); }); } @@ -193,7 +193,6 @@ class AutoWebPlugin { entry(orgEntry) { return Object.assign({}, orgEntry, this.webpackEntry); } - } -module.exports = AutoWebPlugin; \ No newline at end of file +module.exports = AutoWebPlugin; diff --git a/lib/HTMLDocument.js b/lib/HTMLDocument.js index 68ea96c..17525fd 100644 --- a/lib/HTMLDocument.js +++ b/lib/HTMLDocument.js @@ -22,7 +22,6 @@ const DefaultHtmlTemplate = ` * HTML Document Model */ class HTMLDocument { - /** * get parser5 document by html file path * if htmlTemplateFilePath is null,will use DefaultHtmlTemplate as template @@ -87,9 +86,9 @@ class HTMLDocument { * @private */ _findOutAll() { - this.document.childNodes.forEach(node => { + this.document.childNodes.forEach((node) => { if (node.nodeName === 'html') { - node.childNodes.forEach(node => { + node.childNodes.forEach((node) => { if (node.nodeName === 'head') { this.headNode = node; this._findScriptStyleCommentResourceTag(node); @@ -109,7 +108,7 @@ class HTMLDocument { */ _findScriptStyleCommentResourceTag(node) { const { childNodes = [] } = node; - childNodes.forEach(childNode => { + childNodes.forEach((childNode) => { const resource = new Resource(childNode, this.options); const { type } = resource; if (type === 'script') { @@ -140,10 +139,10 @@ class HTMLDocument { * @private */ _ensureRequireScripts(requiresScripts) { - this.scriptResources.forEach(scriptResource => { + this.scriptResources.forEach((scriptResource) => { const { chunkName } = scriptResource; // remove has inject chunk from require chunks - const index = requiresScripts.findIndex(one => one === chunkName); + const index = requiresScripts.findIndex((one) => one === chunkName); if (index >= 0) { requiresScripts.splice(index, 1); } @@ -154,21 +153,27 @@ class HTMLDocument { if (this.scriptInjectCommentNode !== null) { // find out comment in html template // is the position inject left require script - leftScriptNodes = requiresScripts.map(chunkName => util.mockScriptNode({ - src: chunkName, - parentNode: this.scriptInjectCommentNode.parentNode - })); - util.replaceNodesWithNodes([this.scriptInjectCommentNode], leftScriptNodes); + leftScriptNodes = requiresScripts.map((chunkName) => + util.mockScriptNode({ + src: chunkName, + parentNode: this.scriptInjectCommentNode.parentNode, + }) + ); + util.replaceNodesWithNodes( + [this.scriptInjectCommentNode], + leftScriptNodes + ); } else { // if can't find in html template, // inject left require script in body tag's end - leftScriptNodes = requiresScripts.map(chunkName => util.mockScriptNode({ - src: chunkName, - parentNode: this.bodyNode - })); + leftScriptNodes = requiresScripts.map((chunkName) => + util.mockScriptNode({ + src: chunkName, + parentNode: this.bodyNode, + }) + ); this.bodyNode.childNodes.push(...leftScriptNodes); } - } return leftScriptNodes; } @@ -180,10 +185,10 @@ class HTMLDocument { * @private */ _ensureRequireStyles(requiresStyles) { - this.stylesResources.forEach(styleResource => { + this.stylesResources.forEach((styleResource) => { const { chunkName } = styleResource; // remove has inject chunk from require chunks - const index = requiresStyles.findIndex(one => one === chunkName); + const index = requiresStyles.findIndex((one) => one === chunkName); if (index >= 0) { requiresStyles.splice(index, 1); } @@ -194,18 +199,25 @@ class HTMLDocument { if (this.styleInjectCommentNode !== null) { // find out comment in html template // is the position inject left require style - leftStyleNodes = requiresStyles.map(chunkName => util.mockStyleNode({ - href: chunkName, - parentNode: this.styleInjectCommentNode.parentNode - })); - util.replaceNodesWithNodes([this.styleInjectCommentNode], leftStyleNodes); + leftStyleNodes = requiresStyles.map((chunkName) => + util.mockStyleNode({ + href: chunkName, + parentNode: this.styleInjectCommentNode.parentNode, + }) + ); + util.replaceNodesWithNodes( + [this.styleInjectCommentNode], + leftStyleNodes + ); } else { // if can't find in html template, // inject left require script in head tag's end - leftStyleNodes = requiresStyles.map(chunkName => util.mockStyleNode({ - href: chunkName, - parentNode: this.headNode - })); + leftStyleNodes = requiresStyles.map((chunkName) => + util.mockStyleNode({ + href: chunkName, + parentNode: this.headNode, + }) + ); this.headNode.childNodes.push(...leftStyleNodes); } } @@ -223,7 +235,7 @@ class HTMLDocument { lefts.push(...this._ensureRequireStyles([...requires])); } this._findScriptStyleCommentResourceTag({ - childNodes: lefts + childNodes: lefts, }); } @@ -249,7 +261,6 @@ class HTMLDocument { return parse5.serialize(this.document); } - } -module.exports = HTMLDocument; \ No newline at end of file +module.exports = HTMLDocument; diff --git a/lib/Resource.js b/lib/Resource.js index ef8bac6..4ccc8dc 100644 --- a/lib/Resource.js +++ b/lib/Resource.js @@ -31,13 +31,15 @@ function getChunkFiles(compilation, chunkName) { */ function surroundWithIE(nodes = [], parentNode) { const eleString = parse5.serialize({ - childNodes: nodes + childNodes: nodes, }); - return [{ - nodeName: '#comment', - data: `[if IE]>${eleString}${eleString} { + let htmlAttrs = Object.keys(query).map((attrName) => { return { name: attrName, - value: query[attrName] + value: query[attrName], }; }); util.assignParse5Attrs(this.node.attrs, htmlAttrs); } out(compilation) { - let { publicPath: webpackOutputPublicPath = '' } = compilation.compiler.options.output; + let { + publicPath: webpackOutputPublicPath = '', + } = compilation.compiler.options.output; if (this.type === 'style' && this.options.stylePublicPath) { webpackOutputPublicPath = this.options.stylePublicPath; } @@ -168,33 +173,49 @@ class Resource { const parentNode = this.node.parentNode; const { chunkName, outputNodes, resourceAttr, type } = this; const { assets } = compilation; - const htmlOutputURL = url.resolve(webpackOutputPublicPath, this.options.filename); + const htmlOutputURL = url.resolve( + webpackOutputPublicPath, + this.options.filename + ); let newNodes = []; // add a file to newNodes const outToNewNodes = (fileName, fileContent) => { // resource should load in URL relative to html output path - let resourceRelative2HTMLPath = url.resolve(webpackOutputPublicPath, fileName); - resourceRelative2HTMLPath = util.urlRelative(htmlOutputURL, resourceRelative2HTMLPath); - resourceRelative2HTMLPath = url.resolve(webpackOutputPublicPath, resourceRelative2HTMLPath); + let resourceRelative2HTMLPath = url.resolve( + webpackOutputPublicPath, + fileName + ); + resourceRelative2HTMLPath = util.urlRelative( + htmlOutputURL, + resourceRelative2HTMLPath + ); + resourceRelative2HTMLPath = url.resolve( + webpackOutputPublicPath, + resourceRelative2HTMLPath + ); if (type === 'script') { // output js file only if (fileName.endsWith('.js')) { if (resourceAttr.inline) { // inline javascript content to script - newNodes.push(util.mockScriptNode({ - content: fileContent, - parentNode, - attrs: this.node.attrs, - })); + newNodes.push( + util.mockScriptNode({ + content: fileContent, + parentNode, + attrs: this.node.attrs, + }) + ); } else { // load this javascript file with src - newNodes.push(util.mockScriptNode({ - src: resourceRelative2HTMLPath, - parentNode, - attrs: this.node.attrs, - })); + newNodes.push( + util.mockScriptNode({ + src: resourceRelative2HTMLPath, + parentNode, + attrs: this.node.attrs, + }) + ); } } } else if (type === 'style') { @@ -202,18 +223,22 @@ class Resource { if (fileName.endsWith('.css')) { if (resourceAttr.inline) { // inline style content to script - newNodes.push(util.mockStyleNode({ - content: fileContent, - parentNode, - attrs: this.node.attrs, - })); + newNodes.push( + util.mockStyleNode({ + content: fileContent, + parentNode, + attrs: this.node.attrs, + }) + ); } else { // load this style file with src - newNodes.push(util.mockStyleNode({ - href: resourceRelative2HTMLPath, - parentNode, - attrs: this.node.attrs, - })); + newNodes.push( + util.mockStyleNode({ + href: resourceRelative2HTMLPath, + parentNode, + attrs: this.node.attrs, + }) + ); } } } else if (type === 'other') { @@ -222,9 +247,11 @@ class Resource { if (resourceAttr.inline) { // 这里 fileContent 是 Buffer 类型 // 如果是要inline的其它资源，直接URL base64编码进去 - urlContent = `data:${fileType(fileContent).mime};base64,${fileContent.toString('base64')}`; + urlContent = `data:${ + fileType(fileContent).mime + };base64,${fileContent.toString('base64')}`; } else { - urlContent = resourceRelative2HTMLPath + urlContent = resourceRelative2HTMLPath; } this.node.attrs[this.otherAttrIndex].value = urlContent; newNodes.push(this.node); @@ -246,7 +273,11 @@ class Resource { this.outputNodes = newNodes; } else { // 找不到对应的输出文件 - if (compilation.chunks.findIndex(chunk => chunk.name === this.chunkName) > -1) { + if ( + compilation.chunks.findIndex( + (chunk) => chunk.name === this.chunkName + ) > -1 + ) { // 如果在 compilation.chunks 里找到了 this.chunkName 对应的入口，但是找不到对应的输出文件，就把 outputNodes 从文档流去除 // 比如 this.chunkName 是 之后动态生成的 common 入口 // newNodes为空，调用把 outputNodes 从文档流去除 @@ -256,15 +287,24 @@ class Resource { // 如果在 compilation.entrypoints 里找不到 this.chunkName 对应的入口 // 就认为这是一个直接导入本地文件的资源。 // 提前过滤调部分 URL 地址，提高性能，例如 http://url.cn/1.js //url.cn/1.js - if (this.chunkName && !/(https?:)?\/\/.+\..+.*/.test(this.chunkName)) { + if ( + this.chunkName && + !/(https?:)?\/\/.+\..+.*/.test(this.chunkName) + ) { // 相对于模版文件去解析资源文件地址 - const filePath = path.resolve(path.dirname(this.options.template || '.'), this.chunkName); + const filePath = path.resolve( + path.dirname(this.options.template || '.'), + this.chunkName + ); try { // 去读取对应的文件 // 如果这个文件存在就认为这是一个直接导入本地文件的资源。 const fileContent = fs.readFileSync(filePath, { // 如果是 文本文件 'script', 'style' 就读出文本，其它的按照二进制格式读取 - encoding: ['script', 'style'].indexOf(this.type) >= 0 ? 'utf8' : undefined + encoding: + ['script', 'style'].indexOf(this.type) >= 0 + ? 'utf8' + : undefined, }); // 从文件的路径中解析出文件的名称 @@ -306,14 +346,13 @@ class Resource { outToOutputNodes(); } else { const fileNames = getChunkFiles(compilation, chunkName); - fileNames.forEach(fileName => { + fileNames.forEach((fileName) => { const source = assets[fileName]; outToNewNodes(fileName, source.source()); }); outToOutputNodes(); } } - } -module.exports = Resource; \ No newline at end of file +module.exports = Resource; diff --git a/lib/WebPlugin.js b/lib/WebPlugin.js index 9bc4efe..33e100a 100644 --- a/lib/WebPlugin.js +++ b/lib/WebPlugin.js @@ -8,7 +8,6 @@ const HTMLDocument = require('./HTMLDocument'); * an WebPlugin handle a html page */ class WebPlugin { - /** * @param options * @@ -37,8 +36,10 @@ class WebPlugin { // if requires is object then convert it to querystring array if (typeof requires === 'object' && requires.constructor === Object) { const newRequires = []; - Object.keys(requires).forEach(chunkName => { - newRequires.push(`${chunkName}?${querystring.stringify(requires[chunkName])}`); + Object.keys(requires).forEach((chunkName) => { + newRequires.push( + `${chunkName}?${querystring.stringify(requires[chunkName])}` + ); }); requires = newRequires; } else if (requires === undefined) { @@ -58,10 +59,13 @@ class WebPlugin { options.template = path.resolve('.', options.template); // use templateCompiler first if (typeof options.templateCompiler === 'function') { - options.templateContent = options.templateCompiler(options.pageName, options.template); + options.templateContent = options.templateCompiler( + options.pageName, + options.template + ); } else { options.templateContent = fs.readFileSync(options.template, { - encoding: 'utf8' + encoding: 'utf8', }); } } @@ -82,7 +86,7 @@ class WebPlugin { // user may use Default template if (typeof options.template === 'string') { // watch for file changed event - compiler.plugin('watch-run', (watching, done) => { + compiler.hooks.watchRun.tap('WebPlugin', (watching, done) => { // 发生变化的文件列表 const changedTimes = watching.compiler.watchFileSystem.watcher.mtimes; // 如果 HTML 模版文件发生了变化就重新编译模版文件 @@ -95,39 +99,39 @@ class WebPlugin { // add html template file to file dependencies after compile, to let webpack watch html template file change and emit watch-run event // 把 HTML 模版文件添加到文件依赖列表，好让 Webpack 去监听 HTML 模块文件，在 HTML 模版文件发生变化时重新启动一次编译 - compiler.plugin('after-compile', (compilation, done) => { + compiler.hooks.afterCompile.tap('WebPlugin', (compilation) => { if (typeof options.template === 'string') { - const notHas = compilation.fileDependencies.findIndex(filePath => filePath === options.template) === -1; + const notHas = + Array.from(compilation.fileDependencies).findIndex( + (filePath) => filePath === options.template + ) === -1; if (notHas) { - compilation.fileDependencies.push(options.template); + compilation.fileDependencies.add(options.template); } } - done(); }); } // 在有新的输出被输出时，重新生成 HTML - compiler.plugin('emit', (compilation, done) => { - + compiler.hooks.emit.tap('WebPlugin', (compilation) => { // HotUpdateCompilation should be ignore for html will not change // 如果是 HotUpdateCompilation 导致的输出，可以不要重新生成 HTML if (util.isHotUpdateCompilation(compilation)) { - done(); return; } // 确保所有依赖的资源都被考虑到 this.htmlDocument.ensureRequires(options.requires); // out scripts to html document - this.htmlDocument.scriptResources.forEach(scriptResource => { + this.htmlDocument.scriptResources.forEach((scriptResource) => { scriptResource.out(compilation); }); // out styles to html document - this.htmlDocument.stylesResources.forEach(styleResource => { + this.htmlDocument.stylesResources.forEach((styleResource) => { styleResource.out(compilation); }); // out others to html document - this.htmlDocument.otherResources.forEach(otherResource => { + this.htmlDocument.otherResources.forEach((otherResource) => { otherResource.out(compilation); }); @@ -135,9 +139,8 @@ class WebPlugin { const htmlOut = this.htmlDocument.serialize(); // add it to webpack output files util.addFileToWebpackOutput(compilation, options.filename, htmlOut); - done(); }); } } -module.exports = WebPlugin; \ No newline at end of file +module.exports = WebPlugin; diff --git a/lib/util.js b/lib/util.js index 15b82f1..9490017 100644 --- a/lib/util.js +++ b/lib/util.js @@ -46,7 +46,7 @@ function addFileToWebpackOutput(compilation, filename, fileContent) { }, size: () => { return Buffer.byteLength(fileContent, 'utf8'); - } + }, }; } @@ -58,11 +58,14 @@ function addFileToWebpackOutput(compilation, filename, fileContent) { function isExtractStyle(compiler) { const plugins = compiler.options.plugins; try { - const ExtractTextPlugin = require('extract-text-webpack-plugin'); + const MiniCssExtractPlugin = require('mini-css-extract-plugin'); for (let i = 0; i < plugins.length; i++) { const plugin = plugins[i]; - if (plugin.__proto__.constructor === ExtractTextPlugin) { - if (plugin.filename.endsWith('.css')) { + if (plugin.__proto__.constructor === MiniCssExtractPlugin) { + if ( + plugin.options.filename.endsWith('.css') || + plugin.options.chunkFilename.endsWith('.css') + ) { return true; } } @@ -104,8 +107,8 @@ function replaceNodesWithNodes(oldNodes, newNodes = []) { } const childNodes = oldNodes[0].parentNode.childNodes; let index = 0; - oldNodes.forEach(oldNode => { - index = childNodes.findIndex(childNode => childNode === oldNode); + oldNodes.forEach((oldNode) => { + index = childNodes.findIndex((childNode) => childNode === oldNode); childNodes.splice(index, 1); }); childNodes.splice(index, 0, ...newNodes); @@ -130,7 +133,7 @@ function assignParse5Attrs(attrsTo, attrsFrom) { } }); // remove undefined value attr - return attrsTo.filter(attrTo => attrTo.value !== undefined); + return attrsTo.filter((attrTo) => attrTo.value !== undefined); } /** @@ -158,9 +161,7 @@ function mockScriptNode(options) { nodeName: 'script', tagName: 'script', parentNode, - attrs: assignParse5Attrs(attrs, [ - { name: 'src', value: src } - ]), + attrs: assignParse5Attrs(attrs, [{ name: 'src', value: src }]), }; } else if (typeof content === 'string') { const scriptNode = { @@ -169,13 +170,13 @@ function mockScriptNode(options) { parentNode, attrs: assignParse5Attrs(attrs, [ // remove src attr - { name: 'src', value: undefined } + { name: 'src', value: undefined }, ]), }; const textNode = { nodeName: '#text', value: content, - parentNode: scriptNode + parentNode: scriptNode, }; scriptNode.childNodes = [textNode]; return scriptNode; @@ -210,7 +211,7 @@ function mockStyleNode(options) { attrs: assignParse5Attrs(attrs, [ { name: 'rel', value: 'stylesheet' }, { name: 'href', value: href }, - ]) + ]), }; } else if (typeof content === 'string') { const styleNode = { @@ -220,12 +221,12 @@ function mockStyleNode(options) { attrs: assignParse5Attrs(attrs, [ // remove href attr { name: 'href', value: undefined }, - ]) + ]), }; const textNode = { nodeName: '#text', value: content, - parentNode: styleNode + parentNode: styleNode, }; styleNode.childNodes = [textNode]; return styleNode; @@ -261,9 +262,11 @@ function minifyParse5Node(node) { for (let i = childNodes.length - 1; i >= 0; i--) { const childNode = childNodes[i]; const nodeName = childNode.nodeName; - if (nodeName === '#comment' && !childNode.data.startsWith('[if ')) {// remove comments + if (nodeName === '#comment' && !childNode.data.startsWith('[if ')) { + // remove comments childNodes.splice(i, 1); - } else if (nodeName === '#text') {// remove empty text + } else if (nodeName === '#text') { + // remove empty text childNode.value = childNode.value.trim(); if (childNode.value.length === 0) { childNodes.splice(i, 1); @@ -283,19 +286,31 @@ function prettyParse5Node(node) { const preNode = childNodes[i - 1]; const nextNode = childNodes[i + 1]; const newNodes = [childNode]; - if (!(preNode && preNode.nodeName === '#text' && preNode.value.indexOf('\n') >= 0)) { + if ( + !( + preNode && + preNode.nodeName === '#text' && + preNode.value.indexOf('\n') >= 0 + ) + ) { newNodes.unshift({ nodeName: '#text', value: '\n', - parentNode: childNode.parentNode - }) + parentNode: childNode.parentNode, + }); } - if (!(nextNode && nextNode.nodeName === '#text' && nextNode.value.indexOf('\n') >= 0)) { + if ( + !( + nextNode && + nextNode.nodeName === '#text' && + nextNode.value.indexOf('\n') >= 0 + ) + ) { newNodes.push({ nodeName: '#text', value: '\n', - parentNode: childNode.parentNode - }) + parentNode: childNode.parentNode, + }); } // inject break line tag after pr before now tag if (newNodes.length > 1) { @@ -338,7 +353,6 @@ function urlRelative(from, to) { } return toSegments.join('/'); } - } module.exports = { @@ -355,4 +369,4 @@ module.exports = { prettyParse5Node, urlRelative, assignParse5Attrs, -}; \ No newline at end of file +}; diff --git a/package.json b/package.json index 287cad6..7dbb6d0 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,7 @@ "description": "web plugin for webpack, alternatives for html-webpack-plugin, use HTML as entry", "keywords": [ "webpack", + "webpack4", "plugin", "html", "web", @@ -16,12 +17,12 @@ "main": "index.js", "author": "gwuhaolin", "engines": { - "node": ">= 6.0.0" + "node": ">=6.11.5" }, "scripts": { "precommit": "eslint lib", "eslint:fix": "eslint lib --fix", - "demo:auto-plugin": "cd demo/auto-plugin && rm -rf dist && rm -rf dist-js-prod && webpack && webpack -p --output-path dist-js-prod && cd ../../", + "demo:auto-plugin": "cd demo/auto-plugin && rm -rf dist && rm -rf dist-js-prod && webpack --mode development && webpack --mode production --output-path dist-js-prod && cd ../../", "demo:auto-plugin-logic-filename": "cd demo/auto-plugin-logic-filename && rm -rf dist && webpack && cd ../../", "demo:config-resource": "cd demo/config-resource && rm -rf dist-js && rm -rf dist-js-prod && rm -rf dist-template && rm -rf dist && webpack && webpack --config webpack.config-template.js && webpack -p --output-path dist-js-prod && cd ../../", "demo:out-html": "cd demo/out-html && rm -rf dist && webpack && cd ../../", @@ -44,19 +45,20 @@ }, "license": "ISC", "dependencies": { - "file-type": "^7.4.0", - "parse5": "^4.0.0", - "webpack": "<4" + "file-type": "^8.1.0", + "parse5": "^5.0.0", + "webpack": "^4.16.0" }, "devDependencies": { - "css-loader": "^0.28.4", - "ejs": "^2.5.7", - "eslint": "^4.13.1", - "extract-text-webpack-plugin": "^3.0.2", + "css-loader": "^1.0.0", + "ejs": "^2.6.1", + "eslint": "^5.1.0", "file-loader": "^1.1.6", - "html-minifier": "^3.5.7", + "html-minifier": "^3.5.18", "husky": "^0.14.3", - "style-loader": "^0.19.1", - "webpack-dev-server": "^2.9.7" + "mini-css-extract-plugin": "^0.4.1", + "style-loader": "^0.21.0", + "webpack-cli": "^3.0.8", + "webpack-dev-server": "^3.1.4" } } diff --git a/readme.md b/readme.md index 40e2805..98de1ee 100644 --- a/readme.md +++ b/readme.md @@ -4,58 +4,61 @@ [![Dependency Status](https://david-dm.org/gwuhaolin/web-webpack-plugin.svg?style=flat-square)](https://npmjs.org/package/web-webpack-plugin) # web-webpack-plugin -### [中文文档](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/readme_zh.md) +### [中文文档](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/readme_zh.md) --- -想全面学习Webpack？试试它： + +想全面学习 Webpack？试试它：

-

- -[在线阅读全书](http://webpack.wuhaolin.cn/) ---- +

+## [在线阅读全书](http://webpack.wuhaolin.cn/) A good alternatives for [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin), can make webpack use HTML as entry and handle multi pages. - # Install + ```bash npm i web-webpack-plugin --save-dev ``` + ```js const { WebPlugin, AutoWebPlugin } = require('web-webpack-plugin'); ``` - # Feature + ## output html file [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/out-html) + **webpack config** + ```js module.exports = { - entry: { - A: './a', - B: './b', - }, - plugins: [ - new WebPlugin({ - // file name or full path for output file, required. - // pay attention not to duplication of name,as is will cover other file - filename: 'index.html', - // this html's requires entry,must be an array.dependent resource will inject into html use the order entry in array. - requires: ['A', 'B'], - }), - ] + entry: { + A: './a', + B: './b', + }, + plugins: [ + new WebPlugin({ + // file name or full path for output file, required. + // pay attention not to duplication of name,as is will cover other file + filename: 'index.html', + // this html's requires entry,must be an array.dependent resource will inject into html use the order entry in array. + requires: ['A', 'B'], + }), + ], }; ``` -will output an file named `index.html`,this file will auto load js file generated by webpack form entry `A` and `B`,the out html as below: +will output an file named `index.html`,this file will auto load js file generated by webpack form entry `A` and `B`,the out html as below: **output html** + ```html @@ -70,34 +73,36 @@ will output an file named `index.html`,this file will auto load js file generate ``` **output directory** + ``` ├── A.js ├── B.js └── index.html ``` - - ## use html template [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template) + **webpack config** + ```js module.exports = { - entry: { - A: './a', - B: './b', - }, - plugins: [ - new WebPlugin({ - filename: 'index.html', - // html template file path（full path relative to webpack.config.js） - template: './template.html', - requires: ['A', 'B'], - }), - ] + entry: { + A: './a', + B: './b', + }, + plugins: [ + new WebPlugin({ + filename: 'index.html', + // html template file path（full path relative to webpack.config.js） + template: './template.html', + requires: ['A', 'B'], + }), + ], }; ``` **html template** + ```html @@ -116,10 +121,12 @@ module.exports = { ``` -- use `` in html template to load required entry, the `B` in `src="B"` means entry name config in `webpack.config.js` -- comment `` means a inject position ,except for resource load by `` left required resource config in `WebPlugin's requires option`. if there has no `` in html template left required script will be inject ad end of `body` tag. - + +* use `` in html template to load required entry, the `B` in `src="B"` means entry name config in `webpack.config.js` +* comment `` means a inject position ,except for resource load by `` left required resource config in `WebPlugin's requires option`. if there has no `` in html template left required script will be inject ad end of `body` tag. + **output html** + ```html @@ -140,38 +147,42 @@ module.exports = { -``` - - +``` ## config resource attribute [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-resource) + every resource required by html,it can config some attribute as below: -- `_dist` only load in production environment -- `_dev` only load in dev environment -- `_inline` inline resource content info html,inline script and css -- `_ie` resource only required IE browser,to achieve by `[if IE]>resourceresource @@ -187,100 +198,100 @@ module.exports = { ``` + [output html file](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/demo/config-resource/dist-template/index.html) ### config in `webpack.config.js` + **webpack config** + ```js module.exports = { - plugins: [ - new WebPlugin({ - filename: 'index.html', - requires: { - 'ie-polyfill': { - _ie: true - }, - 'inline': { - _inline: true, - _dist: true - }, - 'dev': { - _dev: true - }, - //load a local google analyze file direct without local var webpack - './google-analytics.js': { - _dist: true - } - } - }), - ] + plugins: [ + new WebPlugin({ + filename: 'index.html', + requires: { + 'ie-polyfill': { + _ie: true, + }, + inline: { + _inline: true, + _dist: true, + }, + dev: { + _dev: true, + }, + //load a local google analyze file direct without local var webpack + './google-analytics.js': { + _dist: true, + }, + }, + }), + ], }; ``` + [output html file](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/demo/config-resource/dist-js/index.html) ### inject attr for HTML tag [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-html-attribute) -other attribute in config without name start with **_** will be treat as attribute for HTML tag in output HTML file. e.g if a script resource with query `?crossorigin=anonymous` will lead to output HTML be ``. + +other attribute in config without name start with **\_** will be treat as attribute for HTML tag in output HTML file. e.g if a script resource with query `?crossorigin=anonymous` will lead to output HTML be ``. ## auto detect html entry [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/auto-plugin) + `AutoWebPlugin` plugin can find all page entry in an directory, then auto config an `WebPlugin` for every page to output an html file, you can use it as below: **webpack config** + ```js const autoPlugin = new AutoWebPlugin( // the directory hold all pages - './src/pages', + './src/pages', { - // all props below is not required - - // {string,function} - // the template file path used by all pages - // if typeof template ===string: template config is html template file full path - // if typeof template ===function: template config is function(pageName)=>newFullPath ,ask user for detail - template: './src/template.html', - - // { function(pageName,templateFullPath)=>htmlString } - // if provide AutoWebPlugin will use Compiler to compile org template file to html content before used it in WebPlugin - templateCompiler: (pageName,templateFullPath)=>'', - - // {string,function} - // get WebPlugin template's string content, high priority than template - // typeof===string: template config is html template file string content - // typeof===function: template config is function,ask user for detail - templateContent: `....`, - - // {string,function} - // javascript main file for current page,if it is null will use index.js in current page directory as main file - // typeof entry===string: entry config is entry file full path - // typeof entry===function: entry config is function(pageName)=>newFullPath ,ask user for detail - entry: null, - - // {function} - // get WebPlugin output filename,default filename is pageName - // set filename as function(pageName)=>filename to add custom logic - filename:null, - - // CommonsChunkPlugin options for all pages entry find by AutoWebPlugin. - // if this is null will not do commonsChunk action - commonsChunk: { - name: 'common',// name prop is require,output filename - minChunks: 2,// come from CommonsChunkPlugin - }, - - // {Array} pre append to all page's entry - preEntrys:['./path/to/file1.js'], - - // {Array} post append to all page's entry - postEntrys:['./path/to/file2.js'], - - // {string} publicPath for css file,for js file will use webpack.publicPath - stylePublicPath:null, - - // page name list will not ignore by AutoWebPlugin(Not output html file for this page name) - ignorePages:['pageName'], - - // whether output a pagemap.json file which contain all pages has been resolved with AutoWebPlugin in this way: - // {"page name": "page url",} - outputPagemap: true, + // all props below is not required + + // {string,function} + // the template file path used by all pages + // if typeof template ===string: template config is html template file full path + // if typeof template ===function: template config is function(pageName)=>newFullPath ,ask user for detail + template: './src/template.html', + + // { function(pageName,templateFullPath)=>htmlString } + // if provide AutoWebPlugin will use Compiler to compile org template file to html content before used it in WebPlugin + templateCompiler: (pageName, templateFullPath) => '', + + // {string,function} + // get WebPlugin template's string content, high priority than template + // typeof===string: template config is html template file string content + // typeof===function: template config is function,ask user for detail + templateContent: `....`, + + // {string,function} + // javascript main file for current page,if it is null will use index.js in current page directory as main file + // typeof entry===string: entry config is entry file full path + // typeof entry===function: entry config is function(pageName)=>newFullPath ,ask user for detail + entry: null, + + // {function} + // get WebPlugin output filename,default filename is pageName + // set filename as function(pageName)=>filename to add custom logic + filename: null, + + // {Array} pre append to all page's entry + preEntrys: ['./path/to/file1.js'], + + // {Array} post append to all page's entry + postEntrys: ['./path/to/file2.js'], + + // {string} publicPath for css file,for js file will use webpack.publicPath + stylePublicPath: null, + + // page name list will not ignore by AutoWebPlugin(Not output html file for this page name) + ignorePages: ['pageName'], + + // whether output a pagemap.json file which contain all pages has been resolved with AutoWebPlugin in this way: + // {"page name": "page url",} + outputPagemap: true, } ); @@ -294,6 +305,7 @@ module.exports = { ``` **src directory** + ``` ── src │   ├── home @@ -308,6 +320,7 @@ module.exports = { ``` **output directory** + ``` ├── dist │   ├── common.js @@ -320,81 +333,87 @@ module.exports = { │   ├── signup.html │   └── signup.js ``` + `AutoWebPlugin` find all page `home login signup` directory in `./src/`,for this three page `home login signup`: -- will use `index.js` as main file add three chunk `home login signup` -- output three html file `home.html login.html signup.html` -- auto inject resource required by ever page. e.g(inject home chunk to home.html) + +* will use `index.js` as main file add three chunk `home login signup` +* output three html file `home.html login.html signup.html` +* auto inject resource required by ever page. e.g(inject home chunk to home.html) AutoWebPlugin find all page `home login signup` in dir `./src/` then: -- use index.js as entry for every page to make a chunk named `chunk home login signup` -- output html files for every page `home.html login.html signup.html` -- auto inject resource required by every page（e.g home.html will inject home chunk） + +* use index.js as entry for every page to make a chunk named `chunk home login signup` +* output html files for every page `home.html login.html signup.html` +* auto inject resource required by every page（e.g home.html will inject home chunk） ### ignorePages attribute + `ignorePages` page name list will not ignore by AutoWebPlugin(Not output html file for this page name),type is array of string. ### template attribute + `template` if template is a string , i will regard it as file path for html template（full path relative to webpack.config.js） In the complex case,You can set the template to a function, as follows using the current page directory index.html file as the current page template file **webpack config** + ```js new AutoWebPlugin('./src/', { - // Template files used by all pages - template: (pageName) => { - return path.resolve('./src',pageName,'index.html'); - }, - } -); + // Template files used by all pages + template: (pageName) => { + return path.resolve('./src', pageName, 'index.html'); + }, +}); ``` + ### entry attribute + The entry property is similar to template, and also supports callback functions for complex situations. But if the entry is empty to use the current page directory `index.jsx?` As the entrance - - - -## config publicPath [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/public-path) - +## config publicPath [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/public-path) ## load css [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/extract-css) + The resource for each entry may contain css code. If you want to extract the css code to load alone rather than sneaking into the js where you need to load -[extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin) +[extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin) Separated css code, the rest of the things to me, I will automatically deal with the same as the above js css **webpack config** + ```js // webpack.config.js module.exports = { - module: { - loaders: [ - { - test: /\.css$/, - loader: ExtractTextPlugin.extract({ - fallbackLoader: 'style-loader', - loader: 'css-loader' - }) - } - ] - }, - entry: { - 1: './1', - 2: './2', - 3: './3', - 4: './4', - }, - plugins: [ - new ExtractTextPlugin('[name].css'), - new WebPlugin({ - filename: 'index.html', - template: './template.html', - requires: ['1', '2', '3', '4'] - }), - ] + module: { + loaders: [ + { + test: /\.css$/, + loader: ExtractTextPlugin.extract({ + fallbackLoader: 'style-loader', + loader: 'css-loader', + }), + }, + ], + }, + entry: { + 1: './1', + 2: './2', + 3: './3', + 4: './4', + }, + plugins: [ + new ExtractTextPlugin('[name].css'), + new WebPlugin({ + filename: 'index.html', + template: './template.html', + requires: ['1', '2', '3', '4'], + }), + ], }; ``` **html template** + ```html @@ -415,6 +434,7 @@ module.exports = { ``` **output html** + ```html @@ -442,6 +462,7 @@ module.exports = { ``` **output directory** + ``` ├── 1.css ├── 1.js @@ -452,37 +473,37 @@ module.exports = { ├── 4.css ├── 4.js └── index.html -``` - +``` + ## minify output html [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/minify-html) + `WebPlugin` and `AutoWebPlugin` support `htmlMinify` options to minify output html use the following rules: -- if `htmlMinify` is set - - if `htmlMinify` is `true`, builtin html minify function will used to minify output html(minify HTML only，not CSS or JS) - - if `htmlMinify` is `false`, builtin html pretty function will used to output human read friendly html - - if `htmlMinify` is a `function`,use this function `function(orgHTMLString)=>minifyHTMLString` to minify html -- if `htmlMinify` is missing(`undefined`) - - if environment is `production`, builtin html minify function will used to minify output html(minify HTML only，not CSS or JS) - - if environment is not `production`, builtin html pretty function will used to output human read friendly html - + +* if `htmlMinify` is set - if `htmlMinify` is `true`, builtin html minify function will used to minify output html(minify HTML only，not CSS or JS) - if `htmlMinify` is `false`, builtin html pretty function will used to output human read friendly html - if `htmlMinify` is a `function`,use this function `function(orgHTMLString)=>minifyHTMLString` to minify html +* if `htmlMinify` is missing(`undefined`) - if environment is `production`, builtin html minify function will used to minify output html(minify HTML only，not CSS or JS) + + * if environment is not `production`, builtin html pretty function will used to output human read friendly html + # Distinguish the environment + This plugin takes into account both **development** environment and **production** environment. And only if `process.env.NODE_ENV = production` current environment is **production** environment, others are considered to be development environment. `webpack -p` will use DefinePlugin define `NODE_ENV=production`。 - # In practice -- [redemo](https://github.com/gwuhaolin/redemo) elegant react demo component -- [stickylist](https://github.com/gwuhaolin/stickylist) react sticky header listview component -- [resume](https://github.com/gwuhaolin/resume) my resume -- [remd](https://github.com/gwuhaolin/remd) fast react markdown component -- [use template compiler to pre-translate template](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template-complier) -- [webpack原理与实战](https://github.com/gwuhaolin/blog/issues/4) -- [webpack2 终极优化](https://github.com/gwuhaolin/blog/issues/2) -- [使用模版引擎预处理模版](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template-complier) -- [使用HTML模版配置资源注入到HTML](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template) -- [给HTML标签注入属性](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-html-attribute) -- [在webpack里直接通过JS配置资源注入到HTML](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-resource) -- [管理多个单页应用](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/auto-plugin) -- [从JS中提取出CSS](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/extract-css) -- [直接注入本地文件](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/load-local-file) -- [设置PublicPath](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/public-path) -- [编辑HTML模版时，监听模式下会自动编译和刷新](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/watch-template) + +* [redemo](https://github.com/gwuhaolin/redemo) elegant react demo component +* [stickylist](https://github.com/gwuhaolin/stickylist) react sticky header listview component +* [resume](https://github.com/gwuhaolin/resume) my resume +* [remd](https://github.com/gwuhaolin/remd) fast react markdown component +* [use template compiler to pre-translate template](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template-complier) +* [webpack 原理与实战](https://github.com/gwuhaolin/blog/issues/4) +* [webpack2 终极优化](https://github.com/gwuhaolin/blog/issues/2) +* [使用模版引擎预处理模版](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template-complier) +* [使用 HTML 模版配置资源注入到 HTML](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template) +* [给 HTML 标签注入属性](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-html-attribute) +* [在 webpack 里直接通过 JS 配置资源注入到 HTML](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-resource) +* [管理多个单页应用](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/auto-plugin) +* [从 JS 中提取出 CSS](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/extract-css) +* [直接注入本地文件](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/load-local-file) +* [设置 PublicPath](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/public-path) +* [编辑 HTML 模版时，监听模式下会自动编译和刷新](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/watch-template) diff --git a/readme_zh.md b/readme_zh.md index 1d3e2ec..039ea76 100644 --- a/readme_zh.md +++ b/readme_zh.md @@ -1,58 +1,63 @@ -# web-webpack-plugin -一个很好的[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)替代品, 可以使webpack以HTML为入口和方便的管理多个页面。 +# web-webpack-plugin +一个很好的[html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)替代品, 可以使 webpack 以 HTML 为入口和方便的管理多个页面。 --- -想全面学习Webpack？试试它： + +想全面学习 Webpack？试试它：

-

+

-[在线阅读全书](http://webpack.wuhaolin.cn/) ---- +## [在线阅读全书](http://webpack.wuhaolin.cn/) +本插件主要提供以下 2 个功能，在我写的[《深入浅出 Webpack》](http://webpack.wuhaolin.cn)中有详细介绍： -本插件主要提供以下2个功能，在我写的[《深入浅出 Webpack》](http://webpack.wuhaolin.cn)中有详细介绍： -- [为单页应用生成 HTML](http://webpack.wuhaolin.cn/3实战/3.7为单页应用生成HTML.html) -- [管理多个单页应用](http://webpack.wuhaolin.cn/3实战/3.8管理多个单页应用.html) +* [为单页应用生成 HTML](http://webpack.wuhaolin.cn/3实战/3.7为单页应用生成HTML.html) +* [管理多个单页应用](http://webpack.wuhaolin.cn/3实战/3.8管理多个单页应用.html) -web应用需要加载的资源都需要在 webpack 的 entry里配置，最后输出对应的代码块，但是要让web应用运行起来还需要通过html加载这些资源放在浏览器里运行。webpack只做了资源打包的工作还缺少把这些加载到html里运行的功能，本插件补足了这个功能。 +web 应用需要加载的资源都需要在 webpack 的 entry 里配置，最后输出对应的代码块，但是要让 web 应用运行起来还需要通过 html 加载这些资源放在浏览器里运行。webpack 只做了资源打包的工作还缺少把这些加载到 html 里运行的功能，本插件补足了这个功能。 # 安装 + ```bash npm i web-webpack-plugin --save-dev ``` + ```js const { WebPlugin, AutoWebPlugin } = require('web-webpack-plugin'); ``` # 功能列表 -## 输出html文件 [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/out-html) -**webpack配置** +## 输出 html 文件 [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/out-html) + +**webpack 配置** + ```js module.exports = { - entry: { - A: './a', - B: './b', - }, - plugins: [ - new WebPlugin({ - // 输出的html文件名称或路径，必填，注意不要重名，重名会覆盖相互文件。 - filename: 'index.html', - // 该html文件依赖的entry，必须是一个数组。依赖的资源的注入顺序按照数组的顺序。 - requires: ['A', 'B'], - }), - ] + entry: { + A: './a', + B: './b', + }, + plugins: [ + new WebPlugin({ + // 输出的html文件名称或路径，必填，注意不要重名，重名会覆盖相互文件。 + filename: 'index.html', + // 该html文件依赖的entry，必须是一个数组。依赖的资源的注入顺序按照数组的顺序。 + requires: ['A', 'B'], + }), + ], }; ``` -将会输出一个`index.html`文件，这个文件将会自动引入 entry `A` 和 `B` 生成的js文件， +将会输出一个`index.html`文件，这个文件将会自动引入 entry `A` 和 `B` 生成的 js 文件， + +**输出的 html:** -**输出的html:** ```html @@ -67,34 +72,36 @@ module.exports = { ``` **输出的目录结构** + ``` ├── A.js ├── B.js └── index.html ``` +## 使用 html 模版 [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template) + +**webpack 配置** -## 使用html模版 [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template) -**webpack配置** ```js module.exports = { - entry: { - A: './a', - B: './b', - }, - plugins: [ - new WebPlugin({ - filename: 'index.html', - // html模版文件路径（相对于webpack.config.js的完整路径） - template: './template.html', - requires: ['A', 'B'], - }), - ] + entry: { + A: './a', + B: './b', + }, + plugins: [ + new WebPlugin({ + filename: 'index.html', + // html模版文件路径（相对于webpack.config.js的完整路径） + template: './template.html', + requires: ['A', 'B'], + }), + ], }; ``` -**html模版** -通过html模版你可以很方便清晰的描述资源应该注入的位置 +**html 模版** +通过 html 模版你可以很方便清晰的描述资源应该注入的位置 ```html @@ -114,10 +121,12 @@ module.exports = { ``` -- 在html模版里通过`` 引入需要的entry，`src="B"` 中的B为chunk配置的名称 -- 注释`` 代表除开通过``引入的资源外，在 requires 里配置的剩下的依赖的资源应该被注入的地方，如果模版没有出现``就放在`body`标签的最后 - -**输出的html:** + +* 在 html 模版里通过`` 引入需要的 entry，`src="B"` 中的 B 为 chunk 配置的名称 +* 注释`` 代表除开通过``引入的资源外，在 requires 里配置的剩下的依赖的资源应该被注入的地方，如果模版没有出现``就放在`body`标签的最后 + +**输出的 html:** + ```html @@ -138,39 +147,42 @@ module.exports = { -``` - - +``` ## 配置资源属性 [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-resource) -针对每一个html依赖的资源，有如下属性可以配置： -- `_dist` 只有在生产环境下才引入该资源 -- `_dev` 只有在开发环境下才引入该资源 -- `_inline` 把该资源的内容潜入到html里 -- `_ie` 只有IE浏览器才需要引入的资源，通过 `[if IE]>resourceresource @@ -186,91 +198,90 @@ module.exports = { ``` -[输出的html文件](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/demo/config-resource/dist-template/index.html) + +[输出的 html 文件](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/demo/config-resource/dist-template/index.html) ### 在`webpack.config.js`里配置 -**webpack配置** + +**webpack 配置** + ```js module.exports = { - plugins: [ - new WebPlugin({ - filename: 'index.html', - requires: { - 'ie-polyfill': { - _ie: true - }, - 'inline': { - _inline: true, - _dist: true - }, - 'dev': { - _dev: true - }, - //load a local google analyze file direct without local var webpack - './google-analytics.js': { - _dist: true - } - } - }), - ] + plugins: [ + new WebPlugin({ + filename: 'index.html', + requires: { + 'ie-polyfill': { + _ie: true, + }, + inline: { + _inline: true, + _dist: true, + }, + dev: { + _dev: true, + }, + //load a local google analyze file direct without local var webpack + './google-analytics.js': { + _dist: true, + }, + }, + }), + ], }; ``` -[输出的html文件](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/demo/config-resource/dist-js/index.html) + +[输出的 html 文件](https://github.com/gwuhaolin/web-webpack-plugin/blob/master/demo/config-resource/dist-js/index.html) ### 给 HTML 标签注入属性 [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-html-attribute) -对于其它的非 **_** 开头的属性，会认为这个属性是要被当作 HTML 标签属性注入到生产的 HTML 文件里去的，例如在 script 资源后带上属性 `?crossorigin=anonymous` 输出的 HTML 将会是 `` +对于其它的非 **\_** 开头的属性，会认为这个属性是要被当作 HTML 标签属性注入到生产的 HTML 文件里去的，例如在 script 资源后带上属性 `?crossorigin=anonymous` 输出的 HTML 将会是 `` + +## 自动探测 html 入口 [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/auto-plugin) -## 自动探测html入口 [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/auto-plugin) -`AutoWebPlugin` 可以找到一个目录下所有的页面入口，自动为所有的页面入口配置一个`WebPlugin`输出对应的html，使用如下： +`AutoWebPlugin` 可以找到一个目录下所有的页面入口，自动为所有的页面入口配置一个`WebPlugin`输出对应的 html，使用如下： + +**webpack 配置** -**webpack配置** ```js const autoPlugin = new AutoWebPlugin( // 所有页面的入口目录 - './src/pages', + './src/pages', { - // 以下所有的属性都不是必须的，按照需要选填 - + // 以下所有的属性都不是必须的，按照需要选填 + // {string,function} // 所有页面采用的模版文件 // 如果 template 的类型是 string，template代表模版文件的相对于当前目录根目录的全文件路径 // 如果 template 的类型是 function，template代表可自定义逻辑的函数 function(pageName)=>newFullPath，告诉你当前页面名称你返回一个新的路径代表当前页面的模版路径 template: './src/template.html', - + // { function(pageName,templateFullPath)=>htmlString } // 如果提供了的话，在AutoWebPlugin使用这个模版先先用模版编译器（比如ejs）编译后再使用编译后的结果 - templateCompiler: (pageName,templateFullPath)=>'', - + templateCompiler: (pageName, templateFullPath) => '', + // 当前页面的javascript入口文件，如果为空就使用当前page目录下的 index.js 作为入口 // 如果 entry 的类型是 string，entry代表入口文件的相对于当前目录根目录的全文件路径 // 如果 entry 的类型是 function，entry代表可自定义逻辑的函数 function(pageName)=>newFullPath，告诉你当前页面名称你返回一个新的路径代表当前页面的入口路径 entry: null, - + // {function} // 每个page输出的html的名称，默认按照文件夹名称作为html名称， // 设置 filename 为 function(pageName)=>filename 类型 可添加自定义逻辑 - filename:null, - - // 提取出所有页面公共的代码,如果为空就不做提取操作。 - // 透传给 `CommonsChunkPlugin` 插件的属性 - commonsChunk: { - name: 'common',// 必填属性,输出的文件名称 - minChunks: 2,// 来自 CommonsChunkPlugin 插件 - }, - + filename: null, + // 在所有入口页面的entry前插入 - preEntrys:['./path/to/file1.js'], - + preEntrys: ['./path/to/file1.js'], + // 在所有入口页面的entry后插入 - postEntrys:['./path/to/file2.js'], - + postEntrys: ['./path/to/file2.js'], + // {string} publicPath for css file,for js file will use webpack.publicPath - stylePublicPath:null, - + stylePublicPath: null, + // page name list will not ignore by AutoWebPlugin(Not output html file for this page name) - ignorePages:['pageName'], - + ignorePages: ['pageName'], + // 是否输出一个名叫 pagemap.json 的文件，这个文件包含所有被AutoWebPlugin解析到的2入口页面，文件格式如下 // {"page name": "page url",} outputPagemap: true, @@ -287,6 +298,7 @@ module.exports = { ``` **源代码目录结构** + ``` ── src │   ├── home @@ -301,6 +313,7 @@ module.exports = { ``` **输出的目录结构** + ``` ├── dist │   ├── common.js @@ -314,75 +327,78 @@ module.exports = { │   └── signup.js ``` -AutoWebPlugin插件找出了`./src/`目录下所有的目录 `home login signup`: -- 针对这3个目录分别读取目录里的index.js作为入口生成三个 `chunk home login signup` -- 生成三个html文件 `home.html login.html signup.html` -- 在每个生成的html里自动注入了该html所依赖的资源（例如 home.html 会自动注入 home chunk） +AutoWebPlugin 插件找出了`./src/`目录下所有的目录 `home login signup`: + +* 针对这 3 个目录分别读取目录里的 index.js 作为入口生成三个 `chunk home login signup` +* 生成三个 html 文件 `home.html login.html signup.html` +* 在每个生成的 html 里自动注入了该 html 所依赖的资源（例如 home.html 会自动注入 home chunk） ### ignorePages 属性 -`ignorePages` 被忽略的页面名称列表，被忽略的页面将不会被AutoWebPlugin处理产生对于的html文件，类型是元素为字符串的数组。 + +`ignorePages` 被忽略的页面名称列表，被忽略的页面将不会被 AutoWebPlugin 处理产生对于的 html 文件，类型是元素为字符串的数组。 ### template 属性 -`template` 当template为字符串是，我看作为html模版文件的路径（相对于webpack.config.js的路径）。 -在复杂的情况下你可以设置template为一个函数，如下使用当前页面目录下的index.html文件作为当前页面的模版文件 -**webpack配置** +`template` 当 template 为字符串是，我看作为 html 模版文件的路径（相对于 webpack.config.js 的路径）。在复杂的情况下你可以设置 template 为一个函数，如下使用当前页面目录下的 index.html 文件作为当前页面的模版文件 + +**webpack 配置** + ```js new AutoWebPlugin('./src/', { - // 所有页面采用的模版文件 - template: (pageName) => { - return path.resolve('./src',pageName,'index.html'); - }, - } -); + // 所有页面采用的模版文件 + template: (pageName) => { + return path.resolve('./src', pageName, 'index.html'); + }, +}); ``` -### entry 属性 -entry 属性 和 template 类似，同样也支持回调函数应对复杂情况。但是如果 entry 为空就使用当前页面目录下的 `index.jsx?` 作为入口 +### entry 属性 +entry 属性 和 template 类似，同样也支持回调函数应对复杂情况。但是如果 entry 为空就使用当前页面目录下的 `index.jsx?` 作为入口 ## 配置 publicPath [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/public-path) - ## 加载 css [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/extract-css) -每个 entry 对应的 resource 可能会包含 css 代码。 -如果你想把css代码提取出来单独加载而不是潜入在js里加载你需要先使用 -[extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin) -分离出css代码，剩下的事情交给我，我会自动像上面处理js一样处理css -**webpack配置** +每个 entry 对应的 resource 可能会包含 css 代码。如果你想把 css 代码提取出来单独加载而不是潜入在 js 里加载你需要先使用 +[extract-text-webpack-plugin](https://github.com/webpack/extract-text-webpack-plugin) +分离出 css 代码，剩下的事情交给我，我会自动像上面处理 js 一样处理 css + +**webpack 配置** + ```js // webpack.config.js module.exports = { - module: { - loaders: [ - { - test: /\.css$/, - loader: ExtractTextPlugin.extract({ - fallbackLoader: 'style-loader', - loader: 'css-loader' - }) - } - ] - }, - entry: { - 1: './1', - 2: './2', - 3: './3', - 4: './4', - }, - plugins: [ - new ExtractTextPlugin('[name].css'), - new WebPlugin({ - filename: 'index.html', - template: './template.html', - requires: ['1', '2', '3', '4'] - }), - ] + module: { + loaders: [ + { + test: /\.css$/, + loader: ExtractTextPlugin.extract({ + fallbackLoader: 'style-loader', + loader: 'css-loader', + }), + }, + ], + }, + entry: { + 1: './1', + 2: './2', + 3: './3', + 4: './4', + }, + plugins: [ + new ExtractTextPlugin('[name].css'), + new WebPlugin({ + filename: 'index.html', + template: './template.html', + requires: ['1', '2', '3', '4'], + }), + ], }; ``` -**html模版** +**html 模版** + ```html @@ -402,7 +418,8 @@ module.exports = { ``` -**输出的html:** +**输出的 html:** + ```html @@ -430,6 +447,7 @@ module.exports = { ``` **输出的目录结构** + ``` ├── 1.css ├── 1.js @@ -441,37 +459,35 @@ module.exports = { ├── 4.js └── index.html ``` - -## 压缩输出的HTML [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/minify-html) -`WebPlugin` 和 `AutoWebPlugin` 支持 `htmlMinify` 选项去配置压缩输出HTML的规则，规则如下： -- 如果设置了`htmlMinify`选项： - - 如果`htmlMinify`是`true`, 使用内置的HTML压缩函数去压缩输出的HTML（只会压缩HTML，不会压缩JS和CSS） - - 如果`htmlMinify`是`false`, 使用内置的HTML处理函数去输出让人看上去舒服的HTML - - 如果`htmlMinify`是一个`function`,使用你提供的函数`function(orgHTMLString)=>minifyHTMLString`去处理 -- 如果没设置`htmlMinify`选项： - - 如果当前环境是`production`, 使用内置的HTML压缩函数去压缩输出的HTML（只会压缩HTML，不会压缩JS和CSS） - - 如果当前环境不是`production`, 使用内置的HTML处理函数去输出让人看上去舒服的HTML - - + +## 压缩输出的 HTML [demo](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/minify-html) + +`WebPlugin` 和 `AutoWebPlugin` 支持 `htmlMinify` 选项去配置压缩输出 HTML 的规则，规则如下： + +* 如果设置了`htmlMinify`选项： - 如果`htmlMinify`是`true`, 使用内置的 HTML 压缩函数去压缩输出的 HTML（只会压缩 HTML，不会压缩 JS 和 CSS） - 如果`htmlMinify`是`false`, 使用内置的 HTML 处理函数去输出让人看上去舒服的 HTML - 如果`htmlMinify`是一个`function`,使用你提供的函数`function(orgHTMLString)=>minifyHTMLString`去处理 +* 如果没设置`htmlMinify`选项： - 如果当前环境是`production`, 使用内置的 HTML 压缩函数去压缩输出的 HTML（只会压缩 HTML，不会压缩 JS 和 CSS） + + * 如果当前环境不是`production`, 使用内置的 HTML 处理函数去输出让人看上去舒服的 HTML # 区分环境 + 这个插件会考虑 **开发环境** 和 **生产环境** 两种情况。有且仅当`process.env.NODE_ENV = production`是才认为当前环境是 **生产环境**，其它的都认为是开发环境。 `webpack -p` 参数会通过 DefinePlugin 定义 `NODE_ENV=production`。 - # 项目实践 -- [redemo](https://github.com/gwuhaolin/redemo) 快速优雅的为 react 组件生成文档 -- [stickylist](https://github.com/gwuhaolin/stickylist) react sticky header listview 组件， -- [resume](https://github.com/gwuhaolin/resume) 我的简历 -- [remd](https://github.com/gwuhaolin/remd) 高性能 react markdown 组件 -- [webpack原理与实战](https://github.com/gwuhaolin/blog/issues/4) -- [webpack2 终极优化](https://github.com/gwuhaolin/blog/issues/2) -- [使用模版引擎预处理模版](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template-complier) -- [使用HTML模版配置资源注入到HTML](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template) -- [给HTML标签注入属性](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-html-attribute) -- [在webpack里直接通过JS配置资源注入到HTML](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-resource) -- [管理多个单页应用](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/auto-plugin) -- [从JS中提取出CSS](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/extract-css) -- [直接注入本地文件](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/load-local-file) -- [设置PublicPath](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/public-path) -- [编辑HTML模版时，监听模式下会自动编译和刷新](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/watch-template) + +* [redemo](https://github.com/gwuhaolin/redemo) 快速优雅的为 react 组件生成文档 +* [stickylist](https://github.com/gwuhaolin/stickylist) react sticky header listview 组件， +* [resume](https://github.com/gwuhaolin/resume) 我的简历 +* [remd](https://github.com/gwuhaolin/remd) 高性能 react markdown 组件 +* [webpack 原理与实战](https://github.com/gwuhaolin/blog/issues/4) +* [webpack2 终极优化](https://github.com/gwuhaolin/blog/issues/2) +* [使用模版引擎预处理模版](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template-complier) +* [使用 HTML 模版配置资源注入到 HTML](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/use-template) +* [给 HTML 标签注入属性](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-html-attribute) +* [在 webpack 里直接通过 JS 配置资源注入到 HTML](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/config-resource) +* [管理多个单页应用](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/auto-plugin) +* [从 JS 中提取出 CSS](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/extract-css) +* [直接注入本地文件](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/load-local-file) +* [设置 PublicPath](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/public-path) +* [编辑 HTML 模版时，监听模式下会自动编译和刷新](https://github.com/gwuhaolin/web-webpack-plugin/tree/master/demo/watch-template) diff --git a/test.js b/test.js index 89bd30e..51ca186 100644 --- a/test.js +++ b/test.js @@ -8,6 +8,10 @@ webpack.stdout.pipe(process.stdout); webpack.on('close', (code) => { assert.equal(code, 0, '😡 webpack should run complete successful!'); const change = execSync('git ls-files -dom demo').toString(); - assert.equal(change.length, 0, `😡 webpack compile out in demo has changed, review these files:\n${change}`); + assert.equal( + change.length, + 0, + `😡 webpack compile out in demo has changed, review these files:\n${change}` + ); console.info('😘 webpack compile out in demo not change, test pass~'); -}); \ No newline at end of file +}); From 3d3ad45914be3cd68564dcda377f80d6d6034377 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=90=B4=E6=B5=A9=E9=BA=9F?= Date: Sat, 14 Jul 2018 12:13:02 +0800 Subject: [PATCH 2/2] support webpack4 --- demo/load-local-file/dist-prod/A_ae7690b3d3399e308cf1.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 demo/load-local-file/dist-prod/A_ae7690b3d3399e308cf1.js diff --git a/demo/load-local-file/dist-prod/A_ae7690b3d3399e308cf1.js b/demo/load-local-file/dist-prod/A_ae7690b3d3399e308cf1.js new file mode 100644 index 0000000..0915f88 --- /dev/null +++ b/demo/load-local-file/dist-prod/A_ae7690b3d3399e308cf1.js @@ -0,0 +1 @@ +!function(e){var n={};function t(r){if(n[r])return n[r].exports;var o=n[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,t),o.l=!0,o.exports}t.m=e,t.c=n,t.d=function(e,n,r){t.o(e,n)||Object.defineProperty(e,n,{enumerable:!0,get:r})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,n){if(1&n&&(e=t(e)),8&n)return e;if(4&n&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(t.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&n&&"string"!=typeof e)for(var o in e)t.d(r,o,function(n){return e[n]}.bind(null,o));return r},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},t.p="//cdn.cn/web",t(t.s=0)}([function(e,n){console.log("module A load from web-webpack-plugin")}]); \ No newline at end of file