diff --git a/demo/watch-template/dist/A.js b/demo/watch-template/dist/A.js index 4358669..13b82d1 100644 --- a/demo/watch-template/dist/A.js +++ b/demo/watch-template/dist/A.js @@ -1,113 +1,73 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; /******/ -(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; - - /******/ // identity function for calling harmony imports with the correct context - /******/ - __webpack_require__.i = function (value) { - return value; - }; - - /******/ // 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); - /******/ -}) +/******/ // 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) { +/******/ ([ +/* 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 +/***/ }) +/******/ ]); \ No newline at end of file diff --git a/demo/watch-template/dist/B.js b/demo/watch-template/dist/B.js index dbea7eb..0317fe9 100644 --- a/demo/watch-template/dist/B.js +++ b/demo/watch-template/dist/B.js @@ -1,114 +1,74 @@ +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; /******/ -(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; - - /******/ // identity function for calling harmony imports with the correct context - /******/ - __webpack_require__.i = function (value) { - return value; - }; - - /******/ // 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); - /******/ -}) +/******/ // 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) { +/******/ ([ +/* 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 +/***/ }) +/******/ ]); \ No newline at end of file diff --git a/demo/watch-template/dist/index.html b/demo/watch-template/dist/index.html index 8d601b2..4b1938c 100644 --- a/demo/watch-template/dist/index.html +++ b/demo/watch-template/dist/index.html @@ -1,3 +1,4 @@ + @@ -6,8 +7,8 @@ + background-color: rebeccapurple; +} @@ -16,4 +17,4 @@ - \ No newline at end of file + diff --git a/lib/WebPlugin.js b/lib/WebPlugin.js index c3c9523..a8b6b59 100644 --- a/lib/WebPlugin.js +++ b/lib/WebPlugin.js @@ -30,21 +30,9 @@ class WebPlugin { * @constructor */ constructor(options) { - // user may pass relate path, trans it to abs path - if (typeof options.template === 'string') { - // 在这里计算绝对路径是因为 用于监听模版变化的watching.compiler.watchFileSystem.watcher.mtimes 里存的是 绝对路径 - options.template = path.resolve('.', options.template); - if (typeof options.templateCompiler === 'function') { - options.templateContent = options.templateCompiler(options.pageName, options.template); - } else { - options.templateContent = fs.readFileSync(options.template, { - encoding: 'utf8' - }); - } - } - this.options = options; - this.htmlDocument = new HTMLDocument(options); + + // prepare requires let { requires } = options; // if requires is object then convert it to querystring array if (typeof requires === 'object' && requires.constructor === Object) { @@ -57,6 +45,26 @@ class WebPlugin { requires = []; } options.requires = requires; + + this.buildHtmlDocument(); + } + + buildHtmlDocument() { + const { options } = this; + if (typeof options.template === 'string') { + // user may pass relate path, trans it to abs path + // 在这里计算绝对路径是因为 用于监听模版变化的watching.compiler.watchFileSystem.watcher.mtimes 里存的是 绝对路径 + options.template = path.resolve('.', options.template); + // use templateCompiler first + if (typeof options.templateCompiler === 'function') { + options.templateContent = options.templateCompiler(options.pageName, options.template); + } else { + options.templateContent = fs.readFileSync(options.template, { + encoding: 'utf8' + }); + } + } + this.htmlDocument = new HTMLDocument(options); } // call by webpack @@ -70,6 +78,7 @@ class WebPlugin { global._isExtractStyle = util.isExtractStyle(compiler); } + // user may use Default template if (typeof options.template === 'string') { // watch for file changed event compiler.plugin('watch-run', (watching, done) => { @@ -77,7 +86,7 @@ class WebPlugin { const changedTimes = watching.compiler.watchFileSystem.watcher.mtimes; if (changedTimes[options.template] !== undefined) { // html template file has changed, re build this.htmlDocument - this.htmlDocument = new HTMLDocument(options); + this.buildHtmlDocument(); } done(); }); @@ -85,10 +94,9 @@ class WebPlugin { // add html template file to file dependencies after compile, to let webpack watch html template file change and emit watch-run event compiler.plugin('after-compile', (compilation, done) => { if (typeof options.template === 'string') { - const { fileDependencies } = compilation; - const notHas = fileDependencies.findIndex(filePath => filePath === options.template) === -1; + const notHas = compilation.fileDependencies.findIndex(filePath => filePath === options.template) === -1; if (notHas) { - fileDependencies.push(options.template); + compilation.fileDependencies.push(options.template); } } done(); diff --git a/package.json b/package.json index 09b81bd..fc26f30 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "web-webpack-plugin", - "version": "1.8.1", + "version": "1.8.2", "description": "web plugin for webpack, alternatives for html-webpack-plugin, use HTML as entry", "keywords": [ "webpack", @@ -26,6 +26,7 @@ "demo:out-html": "cd demo/out-html && rm -rf dist && webpack && cd ../../", "demo:use-template": "cd demo/use-template && rm -rf dist && webpack && cd ../../", "demo:use-template-complier": "cd demo/use-template-complier && rm -rf dist && webpack && cd ../../", + "demo:watch-template-complier": "cd demo/use-template-complier && rm -rf dist && webpack -w && cd ../../", "demo:watch-template": "cd demo/watch-template && rm -rf dist && webpack -w && cd ../../", "demo:extract-css": "cd demo/extract-css && rm -rf dist && webpack && cd ../../", "demo:public-path": "cd demo/public-path && rm -rf dist && webpack && cd ../../",