6、按需加载，即在需要利用的时候才打包输出，webpack 提供了 import() 要领，传入要动态加载的模块，来动态加载指定的模块，当 webpack 碰着 import()语句的时候，不会当即去加载该模块，而是在用到该模块的时候，再去加载，也就是说打包的时候会一起打包出来，可是在欣赏器中加载的时候并不会当即加载，而是比及用到的时候再去加载，好比，点击按钮后才会加载某个模块，如:
const button = document.createElement("button"); button.innerText = "点我" button.addEventListener("click", () => { // 点击按钮后加载foo.js import("./foo").then((res) => { // import()返回的是一个Promise工具 console.log(res); }); }); document.body.appendChild(button);
从中可以看到，import() 返回的是一个 Promise 工具，其主要就是操作 JSONP 实现动态加载，返回的 res 功效差异的 export 方法会有差异，假如利用的 module.exports 输出，那么返回的 res 就是 module.exports 输出的功效；假如利用的是 ES6 模块输出，即 export default 输出，那么返回的 res 功效就是 res.default，如:
// ES6模块输出，res功效为 {default: "foo", __esModule: true, Symbol(Symbol.toStringTag): "Module"}
7、开启模块热更新: 模块热更新可以做到在不刷新网页的环境下，更新修改的模块，只编译变革的模块，而不消全部模块从头打包，大大提高开拓效率，在未开启热更新的环境下，每次修改了模块，城市从头打包。
要开启模块热更新，那么只需要在 devServer 设置中添加 hot:true 即可。虽然仅仅开启模块热更新是不足的，我们需要做一些雷同监听的操纵，当监听的模块产生变革的时候，从头加载该模块并执行，如:
module.exports = { devServer: { hot: true // 开启热更新 } } ---------- import foo from "./foo"; console.log(foo); if (module.hot) { module.hot.accept("./foo", () => { // 监听到foo模块产生变革的时候 const foo = require("./foo"); // 从头引入该模块并执行 console.log(foo); }); }