webpack代码分离CommonsChunkPlugin插件的使用（防止重复）
2024-08-30 06:13:37
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.然后就遇到了一个问题，还给出了一个解决方案，需要去查看文档中的插件章节
//optimization与plugins同级
optimization: {
splitChunks: {
cacheGroups: {
commons: {
name: "commons",
chunks: "initial",
minChunks: 2
}
}
}
},
3.运行npm run build，如果有公共部分可得到common.bundle.js文件，如果没有则不会生成这个文件
最新文章
- 常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
- Swift语言与Objective-C语言混合编程
- 微信支付.NET版开发总结(JS API)，好多坑，适当精简
- HDU 4883 TIANKENG’s restaurant
- spring3.0+Atomikos 构建jta的分布式事务 -- NO
- CentOS提示：:unknown filesystem type 'ntfs'.解决
- django - 修改 request.POST的值
- Winform 控件使用集锦
- 字符串String类
- VB的写法，关于版本写入注册表
- PHP 获得当前页面所有变量常量的值
- 16_Python闭包
- 【刷题】Git知识点
- MySQL---DDL+DQL---（四）
- Openwrt自定义CGI实现
- 第一章· Redis入门部署及持久化介绍
- Sysbench 1.0.17安装与测试
- 洗礼灵魂，修炼python（18）--温故加知新
- [LeetCode] 860. Lemonade Change_Easy tag: Greedy
- yaml 入手