module.exports = { module: { rules: [ { test: /.js$/, use: [ { loader: "babel-loader", options: { presets: ["@babel/preset-env"], plugins: ["@babel/plugin-transform-runtime"] } } ], exclude: /node_modules/ } ] } }
3、使用 IgnorePlugin 来忽略某个模块中某些目录中的模块引用，比如在引入某个模块的时候，该模块会引入大量的语言包，而我们不会用到那么多语言包，如果都打包进项目中，那么就会影响打包速度和最终包的大小，然后再引入需要使用的语言包即可，如:
项目根目录下有一个 time 包，其中有一个 lang 包，lang 包中包含了各种语言输出对应时间的 js 文件，time 包下的 index.js 会引入 lang 包下所有的 js 文件，那么当我们引入 time 模块的时候，就会将 lang 包下的所有 js 文件都打包进去，添加如下配置:
const webpack = require("webpack"); module.exports = { plugins: [ new webpack.IgnorePlugin(/lang/, /time/) ] }
引入 time 模块的时候，如果 time 模块中引入了其中的 lang 模块中的内容，那么就忽略掉，即不引入 lang 模块中的内容，需要注意的是，这 /time/ 只是匹配文件夹和 time 模块的具体目录位置无关，即只要是引入了目录名为 time 中的内容就会生效。
4、使用 HappyPack：由于在打包过程中有大量的文件需要交个 loader 进行处理，包括解析和转换等操作，而由于 js 是单线程的，所以这些文件只能一个一个地处理，而 HappyPack 的工作原理就是充分发挥 CPU 的多核功能，将任务分解给多个子进程去并发执行，子进程处理完后再将结果发送给主进程，happypack 主要起到一个任务劫持的作用，在创建 HappyPack 实例的时候要传入对应文件的 loader，即 use 部分，loader 配置中将使用经过 HappyPack 包装后的 loader 进行处理，如:
const HappyPack = require("happypack"); // 安装并引入happypack模块 module.exports = { plugins: [ new HappyPack({ // 这里对处理css文件的loader进行包装 id: "css",// 之前的loader根据具体的id进行引入 use: ["style-loader","css-loader"], threads: 5 // 设置开启的进程数 }) ], module: { rules: [ { test: /.css$/, // 匹配以.css结尾的文件 use: ["happypack/loader?id=css"] //根据happypack实例中配置的id引入包装后的laoder，这里的happyPack的h可以大写也可以小写 } ] } }
webpack 要打包的文件非常多的时候才需要使用 happypack 进行优化，因为开启多进程也是需要耗时间的，所以文件少的时候，使用 happypack 返回更耗时
5、抽离公共模块: 对于多入口情况，如果某个或某些模块，被两个以上文件所依赖，那么可以将这个模块单独抽离出来，不需要将这些公共的代码都打包进每个输出文件中，这样会造成代码的重复和流量的浪费，即如果有两个入口文件 index.js 和 other.js，它们都依赖了 foo.js，那么如果不抽离公共模块，那么 foo.js 中的代码都会打包进最终输出的 index.js 和 other.js 中去，即有两份 foo.js 了。抽离公共模块也很简单，直接在 optimization 中配置即可，如:
module.exports = { splitChunks: { // 分割代码块，即抽离公共模块 cacheGroups: { // 缓存组 common: { // 组名为common可自定义 chunks: "initial", minSize: 0, // 文件大小为0字节以上才抽离 minChunks: 2, // 被引用过两次才抽离 name: "common/foo", // 定义抽离出的文件的名称 } } } }
这样就会将公共的 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 配置无效。