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 设置无效。