- 综合排序
- 最热优先
- 最新优先
- 来自专栏White feathe 的博客
Webpack 3.X - 4.X 升级记录
instanceof Entrypoint instead 解决方案： 去除，require(‘extract-text-webpack-plugin’)的引用 ---- 问题3：webpack.optimize.CommonsChunkPlugin 目前，4.0中已经删除CommonsChunkPlugin，替换成了splitChunks，这里有相关介绍内容 解决方案： 去除 new webpack.optimize.CommonsChunkPlugin resolve('/components/index.html') }), new HashedModuleIdsPlugin(), /* //4.0 删除 CommonsChunkPlugin 模块，改为splitChunks * new webpack.optimize.CommonsChunkPlugin({ name: 'vendor' }), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks
69220编辑于 2021-12-08 - 来自专栏前端杂货铺-Gopal
webpack3 升级到 webpack4 小记
升级过程遇到的问题以及解决 问题 一 Error: webpack.optimize.CommonsChunkPlugin has been removed, please useconfig.optimization.splitChunks 解决方法： 在 webpack4 中不再支持 CommonsChunkPlugin，而是使用 splitChunks 替代，那么这两者有什么区别？ 这里纸上谈兵一下 根据我查到的资料显示， CommonsChunkPlugin 存在以下的问题： CommonsChunkPlugin 会提取一些我们不需要的代码 它在异步模块上效率低下 很难使用，配置也很难理解 相比， splitChunks 具有以下特点： 它不会打包不需要的模块 对异步模块有效（默认情况下是打开的） 更加容易使用和更加自动化 我们平时配置 CommonsChunkPlugin 如下： new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', // 引入node_modules的依賴全抽出來 minChunks:
1.4K20发布于 2020-09-24 - 来自专栏web全栈之路
webpack3.0升级4.0
') module.exports中添加 plugins:[new VueLoaderPlugin()] 修改配置文件 webpack.prod.conf.js： webpack.optimize.CommonsChunkPlugin extract-text-webpack-plugin@next 会下载到 extract-text-webpack-plugin@4.0.0-beta Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o ptimization… 解决: 去掉 webpack.optimize.CommonsChunkPlugin相关配置 webpackConfig removeAttributeQuotes: true }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin
68220编辑于 2022-09-29 - 来自专栏Young Dreamer
webpack4：连奏中的进化
废弃CommonsChunkPlugin webpack4废弃了CommonsChunkPlugin，引入了optimization.splitChunks和optimization.runtimeChunk 先介绍一下code splitting下的CommonsChunkPlugin有什么缺点，然后仔介绍一下chunk split是怎么进行优化的。 CommonsChunkPlugin的问题 CommmonsChunkPlugin的思路是Create this chunk and move all modules matching minChunks CommonsChunkPlugin另外一个问题是：对异步的模块不友好。 总的来说CommonsChunkPlugin有以下三个问题： 产出的chunk在引入的时候，会包含重复的代码； 无法优化异步chunk； 高优的chunk产出需要的minchunks配置比较复杂。
1.6K50发布于 2018-05-29 - 来自专栏前端技术总结
升级你的webpack（下）-- webpack入门教程（三）
webpack1，现需要升级到webpack4，特此记录下升级过程中有一些配置和需要注意的问题，具体会介绍： (1) 需要的node环境的升级 (2) mode参数切换开发模式还是生产模式 (3) 移除了CommonsChunkPlugin 在webpack4之前，可以使用webpack 内置插件：CommonsChunkPlugin。 从webpack4开始，optimization 替代了CommonsChunkPlugin插件，改用optimization属性进行更加灵活的配置。 1.2 使用optimization属性，替代CommonsChunkPlugin 每个配置项的作用： -- minSize 分离前的最小块文件大小，单位为字节 -- minChunks 分离前该块被引入的次数 需要通过配置两次new webpack.optimize.CommonsChunkPlugin来分别获取vendor和manifest的通用chunk方式已经做了整合， 直接在optimization中配置
3.8K600发布于 2018-09-15 - 来自专栏IMWeb前端团队
优化 Webpack 构建结果
项目的是传统的非SPA页面，我们使用了CommonsChunkPlugin来提取公共模块，保证各页面之间部分公共库可以复用缓存，同时使用UglifyJS等来保证输出文件体积的减小。 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 5, }) ], } 但这么做粒度还太粗 调整CommonsChunkPlugin配置 可以发现部分可以公用的文件并没有合到vendor里来。简单调整一下配置： { // ... plugins: [ // ... new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 4, }) ], } 值得注意的是
74990发布于 2018-01-08 - 来自专栏IMWeb前端团队
优化 Webpack 构建结果
项目的是传统的非SPA页面，我们使用了CommonsChunkPlugin来提取公共模块，保证各页面之间部分公共库可以复用缓存，同时使用UglifyJS等来保证输出文件体积的减小。 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 5, }) ], } 但这么做粒度还太粗 调整CommonsChunkPlugin配置 可以发现部分可以公用的文件并没有合到vendor里来。简单调整一下配置： { // ... plugins: [ // ... new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 4, }) ], } 值得注意的是
66030发布于 2019-12-03 - 来自专栏腾讯IMWeb前端团队
鹅厂原创 | 优化 Webpack 构建结果
项目的是传统的非SPA页面，我们使用了CommonsChunkPlugin来提取公共模块，保证各页面之间部分公共库可以复用缓存，同时使用UglifyJS等来保证输出文件体积的减小。 new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 5, }) ], } 但这么做粒度还太粗 3调整CommonsChunkPlugin配置 可以发现部分可以公用的文件并没有合到vendor里来。简单调整一下配置： { // ... plugins: [ // ... new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 4, }) ], } 值得注意的是
41320编辑于 2022-06-29 - 来自专栏大前端（横向跨端 & 纵向全栈）
Webpack提取页面公共资源
利⽤ SplitChunksPlugin 分离基础库 此插件是Wabpack4内置的，无需安装，用于替代CommonsChunkPlugin插件。 利⽤ SplitChunksPlugin 分离依赖包 此插件是Wabpack4内置的，无需安装，用于替代CommonsChunkPlugin插件。 利⽤ SplitChunksPlugin 分离⻚⾯公共⽂件 此插件是Wabpack4内置的，无需安装，用于替代CommonsChunkPlugin插件。
81540编辑于 2023-01-16 - 来自专栏web开发
webpack入门——webpack的安装与使用
webpack --save-dev 我们看看下方的示例： var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin 自定义公共模块提取 在文章开始我们使用了 CommonsChunkPlugin 插件来提取多个页面之间的公共模块，并将该模块打包为 common.js 。 但有时候我们希望能更加个性化一些，我们可以这样配置： var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin" /admin/page2" }, output: { filename: "[name].js" }, plugins: [ new CommonsChunkPlugin ("admin-commons.js", ["ap1", "ap2"]), new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js
2K80发布于 2018-01-17 - 来自专栏云瓣
webpack配置React开发环境(上)
webpack-dev-server # Windows $ set DEBUG=true $ webpack-dev-server Common chunk(抽出公用脚本) 当多脚本具有公共块时，可以使用CommonsChunkPlugin bundle1.js"></script> <script src="bundle2.js"></script> </body> </html> // webpack.config.js var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); module.exports = { entry: { bundle1: '. ('init.js') ] } Vendor chunk 您还可以使用CommonsChunkPlugin从脚本中将供应商库提取到单独的文件中。 : ['jquery'], }, output: { filename: 'bundle.js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin
2K130发布于 2018-05-02 - 来自专栏守候书阁
vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别
的详细用法可以在这里看到——https://github.com/isaacs/node-glob */ let glob = require('glob'); /* webpack插件 */ let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; let publicPath //如果为true,那么公共组件的所有子依赖都将被选择进来 }), //在async chunk 里面找到复用 >= 2次的模块再单独提取出来 new CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; let publicPath [ext]' } ] }, plugins: [ new CommonsChunkPlugin({ name
1.4K30发布于 2018-08-22 - 来自专栏wfaceboss
(21/24) webpack实战技巧：webpack对三方类库的优化操作
需要分离的文件 }; //进行模块化 module.exports=entry; 2.1.2 第二步：引入插件 引入optimize优化插件，并进行相关配置，如下： new webpack.optimize.CommonsChunkPlugin 2.2.3 修改插件配置 修改CommonsChunkPlugin配置 需要修改两个位置： 第一个是在name属性里把原来的字符串改为数组，因为我们要引入多个模块，所以是数组； 第二个是在filename 修改代码如下： new webpack.optimize.CommonsChunkPlugin({ //name对应入口文件中的名字，我们起的是jQuery name:['jquery'
59440发布于 2019-04-08 - 来自专栏程序员IT圈
webpack 4 升级指北
process.env.NODE_ENV到不同环境，也就是不需要 DefinePlugin来做这个了 如果你给mode设置为 none，所有默认配置都去掉了 如果不加这个配置webpack会出现提醒，所以还是加上吧 CommonsChunkPlugin 相信大家如果听说过webpack4的更新，最大的感触应该就是去除了CommonsChunkPlugin，毕竟官方 change log写的篇幅最多的就是这个 CommonsChunkPlugin删除之后
1.5K70发布于 2018-03-05 - 来自专栏IMWeb前端团队
webpack构建优化之减少发布文件
构建的入口是每个页面的入口，使用CommonsChunkPlugin将项目的基础库打包到vendor中，便于做缓存，使用web-webpack-plugin组织页面文件。 vendor里包含了index和home的hash信息， 这其实是使用CommonsChunkPlugin提取公共代码时，将页面的运行时信息，放到了vendor。 new webpack.optimize.CommonsChunkPlugin({ name: ['vendor', 'runtime'], minChunks: 5,
83310发布于 2019-12-03 - 来自专栏小鑫同学编程历险记
Vue-CLi2配置打包环境
html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin webpack.optimize.ModuleConcatenationPlugin(), // split vendor js into its own file new webpack.optimize.CommonsChunkPlugin // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk new webpack.optimize.CommonsChunkPlugin
63120编辑于 2022-12-24 - 来自专栏jeremy的技术点滴
现代Web开发系列教程_03
= [ createHtmlDef({path: 'demo2.html', chunks: ['vendor', 'demo2']}), new webpack.optimize.CommonsChunkPlugin CommonsChunkPlugin的工作原理相当于把指定的chunks里每个chunk引用的所有资源先抽出来，然后对这些重复资源进行统计，看每个重复资源被n个chunk引用，如果n>=minChunks 因此 new webpack.optimize.CommonsChunkPlugin({ name: "vendor", minChunks: Infinity, }) var entries
80160发布于 2018-05-10 - 来自专栏QQ音乐前端团队专栏
Vue打包优化之code spliting
/src/main.js' } new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks 要解决这个问题，这里我们可以使用 CommonsChunkPlugin 的 async 并在 minChunnks 里的count方法来判断数量，只要是 重用次数 超过两个包括两个的异步加载模块（即 import new webpack.optimize.CommonsChunkPlugin({ async: 'used-twice', minChunks: (module, count) => ( = (module.exports.plugins || []).concat([ new BundleAnalyzerPlugin(), new webpack.optimize.CommonsChunkPlugin resource.indexOf('node_modules') >= 0 && resource.match(/\.js$/) ) }), new webpack.optimize.CommonsChunkPlugin
4.5K100发布于 2018-05-22 - 来自专栏前端自习课
【Webpack】1083- 分享15个Webpack实用的插件！！！
webpack.optimize.CommonsChunkPlugin 用途： 用于将页面里的公共代码提取出来，从而进行优化加载速度，该CommonsChunkPlugin只支持Webpack4之前。 /main.js", vendor: ["Vue"] }, plugins: [ new Webpack.optimize.CommonsChunkPlugin name: "vendor", filename: "[name].js" }), new Webpack.optimize.CommonsChunkPlugin Webpack运行时的代码也提取出来, 这样vendor就再次打包也不会变化，可以走浏览器缓存 optimization.SplitChunks 用途： 该功能与上面的webpack.optimize.CommonsChunkPlugin
70620发布于 2021-10-08 - 来自专栏云计算运维
webpack 为什么这么难用？2
uglifyjs-webpack-plugin": "^1.1.1", 以及 7 个 webpack 内置插件： HashedModuleIdsPlugin ModuleConcatenationPlugin CommonsChunkPlugin 比如下面是常常用于提取公共模块的 CommonsChunkPlugin 的配置： new webpack.optimize.CommonsChunkPlugin({ name: 'app', 然后你就去看了 CommonsChunkPlugin 的文档，十五分钟艰难的阅读之后，你会发现这四项配置都不简单，每一项的更改会给构建带来很大的影响。
82330发布于 2021-07-16
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号