webpack将打包的js抽取成一个个独立的js文件

当一个项目使用的插件比较多的时候,打包下来的文件也就越来越大,这时候要这么将里面的插件单独提取出来呢?

在webpack4之前的版本使用CommonsChunkPlugin,

// 提取moment.js
...
plugins:[
    new webpack.optimize.CommonsChunkPlugin({
      name: 'moment',
      minChunks (module) {
        // 在所有模块中查找moment.js,一旦找到就抽离出来
        if(module.resource && (/^.moment.js$/).test(module.resource)) {
          return false;
        }
        return module.context && module.context.includes('node_modules');
      }
    }),
]

抽离结果:

 

在webpack4中CommonsChunkPlugin被删除了,那么我们要这么抽离呢,这时候就要使用optimization.splitChunks了

下面是optimization的具体实现代码,解释都在注释里面

module.exports = = {
entry:{
        index:'./src/script/index.js'
    },
    output:{
        filename:'[name].js',
        path:path.resolve(__dirname,'build') // 下面所有文件打包的相对目录
    },
optimization:{
        minimize:true, //代码压缩,将1080k的文件瞬间压缩到了297k
        minimizer: [new UglifyJsPlugin({sourceMap: true})], 
       //UglifyJsPlugin用来对js文件进行压缩，从而减小js文件的大小，加速load速度,但是会拖慢webpack的编译速度，所有建议在开发简单将其关闭，部署的时候再将其打开。
        splitChunks: {
            minSize: 30000, // 3kb   表示在压缩前的最小模块大小,默认值是30kb
            chunks:'all',//同时分割同步和异步代码,推荐。
            automaticNameDelimiter:'_',//名称分隔符，默认是~
            cacheGroups: {  //默认的规则不会打包,需要单独定义
                sync: { // sync.js不会被打包到index.js里面
                    name:'sync', // 如果此处不写，默认名字胃sync~[name].js (sync~index.js)
                    chunks: 'all', // 异步和非异步块之间也可以共享块
                    test: /sync\.js/,
                    enforce: true // //WebPack忽略splitChunks.minSize，splitChunks.minChunks，splitChunks.maxAsyncRequests和splitChunks.maxInitialRequests选项
                },
                jquery: { // 将jquery抽出来
                    name:'jquery',
                    chunks: 'all',
                    test: /jquery\.js/,
                    enforce: true
                },
                moment: { // 将jquery抽出来
                    name:'momentFile/moment', // 打包到build/momentFile/moment
                    chunks: 'all',
                    test: /moment\.js/,
                    enforce: true
                }
            },
          }
    }
}

我的package.json安装了以下插件

...
 "dependencies": {
    "axios": "^0.19.0",
    "better-scroll": "^1.15.2",
    "dayjs": "^1.8.17",
    "jquery": "^3.4.1",
    "moment": "^2.24.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "rxjs": "^6.5.3",
    "vue": "^2.6.10"
  }

运行npm run webpack 

结果: