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); }); }