Webpack CommonsChunkPlugin - 腾讯云开发者社区

文章/答案/技术大牛

发布

Webpack 3.X - 4.X 升级记录

Webpack 3.X - 4.X 升级记录先升级 webpack-cli 首先：执行命令 npm install webpack-cli -D 或者 npm install -g yarn yarn...问题3：webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks...目前，4.0中已经删除CommonsChunkPlugin，替换成了splitChunks，这里有相关介绍内容解决方案：去除 new webpack.optimize.CommonsChunkPlugin...模块，改为splitChunks * new webpack.optimize.CommonsChunkPlugin({ name: 'vendor'...}), new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks

6752 0

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.4K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

webpack4：连奏中的进化

废弃CommonsChunkPlugin webpack4废弃了CommonsChunkPlugin，引入了optimization.splitChunks和optimization.runtimeChunk...CommonsChunkPlugin另外一个问题是：对异步的模块不友好。...runtimeChunkPlugin 在使用CommonsChunkPlugin的时候，我们通常会把webpack runtime的基础函数提取出来，单独作为一个chunk，毕竟code splitting...webpack4废弃了CommonsChunkPlugin，采用了runtimeChunkPlugin可以将每个entry chunk中的runtime部分的函数分离出来，只需要一个简单的配置：optimization.runtimeChunk...4.修改webpack.prod.conf.js 添加mode属性，并设置为production模式；然后注释掉 webpack4生产模式已经内置的插件，如CommonsChunkPlugin、uglifyjs-webpack-plugin

1.6K5 0

webpack3.0升级4.0

总结 1.webpack 3.11升级4.26 为了提升打包效率，在webpack3.11基础之上做了升级，webpack4.0发布以来，零配置的webpack对项目本身提供的“打包”和“压缩”功能已经做了优化...： webpack.optimize.CommonsChunkPlugin has been removed, please use config.optimization.splitChunks instead...@4.0.0-beta Error: webpack.optimize.CommonsChunkPlugin has been removed, please use config.o ptimization...… 解决: 去掉 webpack.optimize.CommonsChunkPlugin相关配置 webpackConfig中与plugins的同级添加 optimization: { splitChunks...removeAttributeQuotes: true }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin

6652 0

升级你的webpack（下）-- webpack入门教程（三）

参数切换开发模式还是生产模式 (3) 移除了CommonsChunkPlugin，改用了optimization属性进行更加灵活的配置 (4) 用新的CSS文件提取插件mini-css-extract-plugin...） 1.使用optimization，替代了CommonsChunkPlugin 1.1 持久化缓存 webpack需要使用hash来做静态资源的更新，文件名的hash值目前有三种计算hash的方式：[...在webpack4之前，可以使用webpack 内置插件：CommonsChunkPlugin。...从webpack4开始，optimization 替代了CommonsChunkPlugin插件，改用optimization属性进行更加灵活的配置。...需要通过配置两次new webpack.optimize.CommonsChunkPlugin来分别获取vendor和manifest的通用chunk方式已经做了整合，直接在optimization中配置

3.8K60 0

优化 Webpack 构建结果

项目的是传统的非SPA页面，我们使用了CommonsChunkPlugin来提取公共模块，保证各页面之间部分公共库可以复用缓存，同时使用UglifyJS等来保证输出文件体积的减小。...new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 5, }) ], } 但这么做粒度还太粗...庆幸的是Webpack生态圈是如此的丰富，有不少好工具可以利用。 1. 分析打包结果 webpack-bundle-analyzer是一个非常好用的Webpack包分析工具。...调整CommonsChunkPlugin配置可以发现部分可以公用的文件并没有合到vendor里来。简单调整一下配置： { // ... plugins: [ // ......new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 4, }) ], } 值得注意的是

7329 0

优化 Webpack 构建结果

6433 0

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-commons.js", ["ap1", "ap2"]), new CommonsChunkPlugin("commons.js", ["p1", "p2", "admin-commons.js...webpack.optimize.CommonsChunkPlugin('common.js'); var ExtractTextPlugin = require("extract-text-webpack-plugin

2K8 0

webpack配置React开发环境(上)

chunk(抽出公用脚本) 当多脚本具有公共块时，可以使用CommonsChunkPlugin将公共部分提取到单独的文件中。...var CommonsChunkPlugin = require("webpack/lib/optimize/CommonsChunkPlugin"); module.exports = { entry...query: { presets: ['es2015', 'react'] } }, ] }, plugins: [ new CommonsChunkPlugin...('init.js') ] } Vendor chunk 您还可以使用CommonsChunkPlugin从脚本中将供应商库提取到单独的文件中。...main.js', vendor: ['jquery'], }, output: { filename: 'bundle.js' }, plugins: [ new webpack.optimize.CommonsChunkPlugin

2K13 0

鹅厂原创 | 优化 Webpack 构建结果

项目的是传统的非SPA页面，我们使用了CommonsChunkPlugin来提取公共模块，保证各页面之间部分公共库可以复用缓存，同时使用UglifyJS等来保证输出文件体积的减小。...new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 5, }) ], } 但这么做粒度还太粗...庆幸的是Webpack生态圈是如此的丰富，有不少好工具可以利用。 1分析打包结果 webpack-bundle-analyzer是一个非常好用的Webpack包分析工具。...3调整CommonsChunkPlugin配置可以发现部分可以公用的文件并没有合到vendor里来。简单调整一下配置： { // ... plugins: [ // ... ...new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 4, }) ], } 值得注意的是

4042 0

【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...安装无需安装，webpack内置配置 webpack.config.js const Webpack = require("webpack") module.exports = { plugins

6832 0

Vue-CLi2配置打包环境

/utils') const webpack = require('webpack') const config = require('.....html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin...js into its own file new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks...file in order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin.../plugins/commons-chunk-plugin/#extra-async-commons-chunk new webpack.optimize.CommonsChunkPlugin(

6182 0

webpack 4 升级指北

2018年2月25日，刚过完年webpack就给了一个加班红包。webpack4经过1个月的缓冲期，终于发布了正式版，那么抛给广大开发者的问题又来了，我是不是要升级了呢？...安装首先你要重新安装以下的依赖包： webpack4 webpack-cli（用来启动webpack） html-webpack-plugin还没有更新，会出现 compilation.templatesPluginisnotafunction...会出现提醒，所以还是加上吧 CommonsChunkPlugin 相信大家如果听说过webpack4的更新，最大的感触应该就是去除了CommonsChunkPlugin，毕竟官方 change log写的篇幅最多的就是这个...CommonsChunkPlugin删除之后，改成使用 optimization.splitChunks进行模块划分，详细文档：(https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693.../webpack/releases)，希望官方文档赶紧出来吧。

1.5K7 0

webpack 为什么这么难用？2

换句话说，如果你想给 webpack 写一个广为人知的插件，你就必须深入了解 webpack 的全部，这一点我不反对，毕竟 webpack 开发者和 webpack 使用者在能力的要求上有高低之分。...二、过重的插件体系插件体系是 webpack 的核心，事实上，webpack 的大部分功能都是通过内部插件或者第三方插件来完成的。可以说，webpack 的生态就是建立在众多插件之上的。...7 个 webpack 内置插件： HashedModuleIdsPlugin ModuleConcatenationPlugin CommonsChunkPlugin DefinePlugin HotModuleReplacementPlugin...比如下面是常常用于提取公共模块的 CommonsChunkPlugin 的配置： new webpack.optimize.CommonsChunkPlugin({ name: 'app',...然后你就去看了 CommonsChunkPlugin 的文档，十五分钟艰难的阅读之后，你会发现这四项配置都不简单，每一项的更改会给构建带来很大的影响。

8203 0

vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别

2.说明首先，我用的vue和webpack的版本都是2.x的，请大家留意自己使用的版本，特别是webpack的版本，1和2还是有些区别的。...webpack'); /* html-webpack-plugin插件，webpack中生成HTML的插件，具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin...*/ let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin...let path = require('path'); let webpack = require('webpack'); /* html-webpack-plugin插件，webpack中生成HTML...*/ let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin

1.4K3 0

React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)

-> webpack.dev.conf.js const webpack = require('webpack');//引入webpack const opn = require('opn');//打开浏览器...(), /* common 业务公共代码，vendor引入第三方 */ new webpack.optimize.CommonsChunkPlugin({...order to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin...(), /* common 业务公共代码，vendor引入第三方 */ new webpack.optimize.CommonsChunkPlugin({ name: ["common", "vendor...to // prevent vendor hash from being updated whenever app bundle is updated new webpack.optimize.CommonsChunkPlugin

2K8 0

正确的Webpack配置姿势，快速启动各式框架！

CommonsChunkPlugin 提取代码中的公共模块，然后将公共模块打包到一个独立的文件中，以便在其他的入口和模块中使用。...像之前有个项目有远程服务器调试代码的需求[捂脸]，这时候我们需要把依赖单独抽离出来（不然文件太大了）： 1234567 new CommonsChunkPlugin({name: 'vendors',filename...css打包合并： 123 new ExtractTextPlugin('style.css', {allChunks: true // 提取所有的chunk（默认只提取initial chunk，而上面CommonsChunkPlugin...('webpack');var CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');var ExtractTextPlugin....js$/,loader: 'babel-loader',exclude: /node_modules/}]},plugins: [// 使用CommonChunksLoader来提取公共模块new CommonsChunkPlugin

2.1K3 0

webpack调优总结

这里用到的插件除了上文提到的 DllPlugin 外，还有 CommonsChunkPlugin，相关配置如下： module.exports = { entry: { vendor...new webpack.optimize.CommonsChunkPlugin({ names: ['vendor'], minChunks: Infinity..., }), new webpack.optimize.CommonsChunkPlugin({ name: 'app',...minChunks: 3, children: true, async: 'chunk-vendor', }), new webpack.optimize.CommonsChunkPlugin...如果你对 webpack 的工作原理感兴趣，可以看看我写的另一篇文章webpack启动代码源码解读

3772 0

Webpack多入口文件、热更新等体验

二、webpack.optimize.CommonsChunkPlugin 抽取公共模块为一个独立的文件，一是指定的多个模块打成一个包；二是在指定的chunks中抽取公共模块参数名称说明 name.../src/vendor-jquery', 'bootstrap'] }, plugins: [ new webpack.optimize.CommonsChunkPlugin...CommonsChunkPlugin正确的引入方式 3....用manifest实现js库的增量更新如果输出文件名包含hash值，需要引入以下两个插件： HashedModuleIdsPlugin：算hash值利用CommonsChunkPlugin配置，他是...new webpack.optimize.CommonsChunkPlugin({ name: 'manifest', chunks: ['vendor'] }) 三、webpack 样式打包

3.1K6 0

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 = (module.exports.plugins || []).concat([ new BundleAnalyzerPlugin(), new webpack.optimize.CommonsChunkPlugin...resource.indexOf('node_modules') >= 0 && resource.match(/\.js$/) ) }), new webpack.optimize.CommonsChunkPlugin

4.5K10 0

点击加载更多

Webpack 3.X - 4.X 升级记录

webpack3 升级到 webpack4 小记

webpack4：连奏中的进化

webpack3.0升级4.0

升级你的webpack（下）-- webpack入门教程（三）

优化 Webpack 构建结果

优化 Webpack 构建结果

webpack入门——webpack的安装与使用

webpack配置React开发环境(上)

鹅厂原创 | 优化 Webpack 构建结果

【Webpack】1083- 分享15个Webpack实用的插件！！！

Vue-CLi2配置打包环境

webpack 4 升级指北

webpack 为什么这么难用？2

vue+webpack搭建单文件应用和多文件应用webpack.config.js的写法区别

React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)

正确的Webpack配置姿势，快速启动各式框架！

webpack调优总结

Webpack多入口文件、热更新等体验

Vue打包优化之code spliting

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐