Webpack：SplitChunksPlugin配置参数详解

最新推荐文章于 2024-04-19 21:17:19 发布

oiaa

最新推荐文章于 2024-04-19 21:17:19 发布

阅读量1.7k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_41900808/article/details/88735216

版权

本文详细解析Webpack的SplitChunksPlugin，重点介绍了如何使用cacheGroups进行缓存组配置，以实现将lodash和jquery等库打包到单独的vendors.js文件中，从而优化项目构建。

摘要由CSDN通过智能技术生成

安装@babel/plugin-syntax-dynamic-import

这是动态引入模块的插件

npm install --save-dev @babel/plugin-syntax-dynamic-import

文档：https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import

cacheGroups缓存组

加入引入了两个包为lodash和jquery，如果想把lodash和jquery放在一起单独生成一个vendors.js文件，需要用到cacheGroups。打包jquery时，先放入缓存组，打包lodash时，发现lodash也符合缓存组的要求，那么放入缓存组中，当最终所有的模块都分析好了之后，把缓存组的所有模块都打包成一起去

配置

webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const path = require('path');

module.exports = {
    entry: {
        main: './src/index.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /