需要将引入js文件直接嵌入到html文件中,以减少文件的请求次数,达到更好的性能,htmlWebpackPlugin官方没有提供配置想去完成这个功能,但是由于该需求的广泛,官方提供了处理方法
https://github.com/jantimon/html-webpack-plugin/blob/master/examples/inline/template.jade
html对应的具体代码为:
<script> <%for(varfileinhtmlWebpackPlugin.files.chunks){%> <%= compilation.assets[htmlWebpackPlugin.files.chunks[file].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> <%}%> </script>
将这一段代码插入到你需要提升性能的html文件的head中,我这里简单写一个HTML文件
<!doctype html> <html> <head> <title><%= htmlWebpackPlugin.options.title%></title> <script> <%for(var file in htmlWebpackPlugin.files.chunks){ %> <%= compilation.assets[htmlWebpackPlugin.files.chunks[file].entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %> <%}%> </script> </head> <body> <!--我是一行注释--> </body> </html>
思路就是在html先准备一个script标签,然后还是通过<%%>模板遍历配置文件中的chunks,取到对应的js文件的相对路径,通过compilation.assets['相对路径'].source()获取文件的内容,下面是webpack打包之后的html文件的内容,成功将js文件获取并嵌入到html文件中:
<!doctype html> <html> <head> <title>index.html</title> <script> /******/ (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 /******/ }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // 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 = "www.cnd"; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = "./src/script/main.js"); /******/ }) /************************************************************************/ /******/ ({ /***/ "./src/script/main.js": /*!****************************!*\ !*** ./src/script/main.js ***! \****************************/ /*! no static exports found */ /***/ (function(module, exports) { eval("function hello(){\r\n \r\n}\n\n//# sourceURL=webpack:///./src/script/main.js?"); /***/ }) /******/ }); /******/ (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 /******/ }); /******/ } /******/ }; /******/ /******/ // define __esModule on exports /******/ __webpack_require__.r = function(exports) { /******/ Object.defineProperty(exports, '__esModule', { value: true }); /******/ }; /******/ /******/ // 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 = "www.cnd"; /******/ /******/ /******/ // Load entry module and return exports /******/ return __webpack_require__(__webpack_require__.s = "./src/script/a.js"); /******/ }) /************************************************************************/ /******/ ({ /***/ "./src/script/a.js": /*!*************************!*\ !*** ./src/script/a.js ***! \*************************/ /*! no static exports found */ /***/ (function(module, exports) { eval("function a(){}\n\n//# sourceURL=webpack:///./src/script/a.js?"); /***/ }) /******/ }); </script> </head> <body> <!--我是一行注释--> </body> </html>
html对应的具体代码为,
思路就是在html先准备一个script标签,然后还是通过<%%>模板遍历配置文件中的chunks,取到对应的js文件的相对路径,通过compilation.assets['相对路径'].source()获取文件的内容
将这一段代码插入到你需要提升性能的html文件的head中,我这里简单写一个HTML文件
思路就是在html先准备一个script标签,然后还是通过<%%>模板遍历配置文件中的chunks,取到对应的js文件的相对路径,通过compilation.assets['相对路径'].source()获取文件的内容