Webpack 配置防止重复

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第25天，点击查看活动详情

如何有效配置防止重复，这个是我们开发者比较关注的话题，那么，Webpack5 中是如何配置防止重复呢，下面我们带着问题一起学习吧！

这种方法，仍旧是需要在 entry 里边做一些配置。不过相比第一种方法，它可以把一些公共的文件给处理成单独的 chunk。

修改 webpackconfig.js 配置中 entry 入口配置，将 index 和 another 设置为对象，这对象中使用 import 和 dependOn 属性。

// webpack.config.js
//...
module.exports = {
  entry:{
    index:{
        import:'./src/index.js',
        dependOn: 'shared'
    },
    anonther:{
        import: './src/another-module.js',
        dependOn: 'shared'
    },
    // 配置 lodash，当 index 和 another 这两模块中使用 lodash 时，将其抽离，并且命名为 shared 的 chunk。
    shared: 'lodash',
  },

执行打包命令，仔细观察打包输出日志，发现多出来一个 shared.bundle.js 文件，将 lodash 单独抽离出来生成的产物，产物大小为 1.39M。

除了使用以上方法之外，我们还可以使用 Webpack 提供的内置的插件 SplitChunksPlugin，插件可以将公共的依赖模块提取到已有的入口 chunk 中，或者提取到一个新生成的 chunk。

从 webpack v4 开始，移除了 CommonsChunkPlugin，取而代之的是 optimization.splitChunks。

// webpack.config.js
//...s
module.exports = {


  //entry: './src/index.js',
  entry:{


    index: './src/index.js',
    another: './src/another-module.js'


  },
  optimization: {
  //...
     
    splitChunks: {
      chunks: 'all',
    },
  },
//...
}

使用 optimization.splitChunks 配置选项之后，现在应该可以看出，index.bundle.js 和 another.bundle.js 中已经移除了重复的依赖模块。

需要注意的是，插件将 lodash 分离到单独的 chunk，并且将其从 main bundle 中移除，减轻了大小。

很显然，这种方法会帮助我们自动的做公共代码的抽离，那么，能不能在浏览中正常的运行呢？启动服务，刷新浏览器，可以看到如下结果。

防止重复的分离方法：我们可以在入口的地方通过 Entry dependencies 或者 SplitChunksPlugin 去重和分离代码。