欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack代码分离CommonsChunkPlugin插件的使用(防止重复)

程序员文章站 2022-04-15 15:35:19
1.webpack.config.js中添加: const path = require('path'); + const webpack = require('webpack'); const HTMLWebpackPlugin = require('html-webpack-plugin'); ......

 1.webpack.config.js中添加:


const path = require('path'); + const webpack = require('webpack'); const htmlwebpackplugin = require('html-webpack-plugin'); module.exports = { entry: { index: './src/index.js', another: './src/another-module.js' }, plugins: [ new htmlwebpackplugin({ title: 'code splitting' - }) + }), + new webpack.optimize.commonschunkplugin({ + name: 'common' // 指定公共 bundle 的名称。 + }) ], output: { filename: '[name].bundle.js', path: path.resolve(__dirname, 'dist') } };

2.然后就遇到了一个问题,还给出了一个解决方案,需要去查看文档中的插件章节

webpack代码分离CommonsChunkPlugin插件的使用(防止重复)

 

 

//optimization与plugins同级
optimization: {
    splitchunks: {
        cachegroups: {
            commons: {
                name: "commons",
                chunks: "initial",
                minchunks: 2
            }
        }
    }
},

 

3.运行npm run build,如果有公共部分可得到common.bundle.js文件,如果没有则不会生成这个文件

webpack代码分离CommonsChunkPlugin插件的使用(防止重复)