webpack高级配置与优化详解(7)

这样就会将公共的 foo.js 模块抽离到 common 目录下 foo.js 中了，但是如果我们也有多个文件依赖了第三方模块如 jquery，如果按以上配置，那么 jquery 也会被打包进 foo.js 中，会导致代码混乱，所以我们希望将 jquery 单独抽出来，即与 foo.js 分开，我们可以复制一份以上配置，并通过设置抽离代码权重的方式来实现，即优先抽离出 jquery，如:

module.exports = { splitChunks: { // 分割代码块，即抽离公共模块 cacheGroups: { // 缓存组 common: { // 组名为common可自定义 chunks: "initial", minSize: 0, // 文件大小为0字节以上才抽离 minChunks: 2, // 被引用过两次才抽离 name: "common/foo", // 定义抽离出的文件的名称 }, verdor: { test: /node_modules/, priority: 1, // 设置打包权重，即优先抽离第三方模块 chunks: "initial", minSize: 0, // 文件大小为0字节以上才抽离 minChunks: 2, // 被引用过两次才抽离 name: "common/jquery", // 定义抽离出的文件的名称 } } } }

这样就会在 common 目录下同时抽离出 foo.js 和 jquery.js 了，需要注意的是，代码的抽离必须是该模块没有被排除打包，即该模块会被打包进输出 bundle 中，如果第三方模块已经通过 externals 排除打包，则以上 vendor 配置无效。

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

（编辑：ASP站长网）