Webpack 2 CommonsChunkPlugin not minified - 腾讯云开发者社区

文章/答案/技术大牛

发布

为 VUE 项目添加 PWA 解决发布后刷新报错问题

:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))...console.error('Error during service worker registration:', e) }) } }) })() 添加 build/load-minified.js...首先引用sw-precache-webpack-plugin和build/load-minified const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin.../load-minified') 为 webpack 插件 HtmlWebpackPlugin 添加参数 serviceWorkerLoader: `${loadMinified( path.join...html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin

1.6K1 0

Webpack2入门

介绍 webpack 是一个 JavaScript 应用程序模块打包器(module bundler)。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。...Webpack可以做什么处理module依赖关系打包js，css和png等降低页面初始加载时间方便组合第三方组件库可以转换不同语法成标准语法安装这里使用的是 webpack 2.4.1 版本...# 全局安装 npm install -g webpack #本地安装 npm install --save-dev webpack 一个小例子创建应用并安装必要的依赖库 $ mkdir webpack-demo.../style.css 992 bytes {0} [built] [2] ./index.js 171 bytes {0} [built] [3] ./~/css-loader!....热部署本地热部署第一步：启动 webpack $ webpack --watch 第二步：修改代码第三部：浏览器刷新（访问file:///...

9317 0

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

是的

没有找到

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

暂时解决方案： yarn add webpack-contrib/html-webpack-plugin -D 相关讨论解决方案，在这里 ---- 问题2：Use Chunks.groupsIterable...问题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

6802 0

webpack3 升级到 webpack4 小记

升级过程遇到的问题以及解决问题一 Error: webpack.optimize.CommonsChunkPlugin has been removed, please useconfig.optimization.splitChunks...解决方法：在 webpack4 中不再支持 CommonsChunkPlugin，而是使用 splitChunks 替代，那么这两者有什么区别？...这里纸上谈兵一下根据我查到的资料显示， CommonsChunkPlugin 存在以下的问题： CommonsChunkPlugin 会提取一些我们不需要的代码它在异步模块上效率低下很难使用，配置也很难理解...webpack.optimize.CommonsChunkPlugin({ name: 'vendor', // 引入node_modules的依賴全抽出來 minChunks:.../node_modules‘) ) === 0 ) } // 或者直接minChunks: 2，重復模塊大於2的全部抽出來 }) 平时使用 splitChunks 如下

1.4K2 0

webpack4：连奏中的进化

webpack4在2月底的时候发布，这次webpack4有了一个名字"Legato"，也就是"连奏"的意思，寓意webpack在不断进化，而且是无缝(no-gaps)的进化。...废弃CommonsChunkPlugin webpack4废弃了CommonsChunkPlugin，引入了optimization.splitChunks和optimization.runtimeChunk...webpack2相对于webpack最大的改进就是支持ES Module，可以直接分析ES Module之间的依赖关系，而webpack1必须将ES Module转换成CommonJS模块之后，才能使用...除此之外webpack2支持tree sharking，与ES Module的设计思路高度契合。...webpack3相对于webpack2，过渡相对平稳，但是新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment。

1.6K5 0

webpack3.0升级4.0

文章目录 1.webpack 3.11升级4.26 2. 安装/升级依赖 3. 遇到的问题 4....2....： 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

6712 0

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

背景介绍：我负责的一个前端项目之前用到的是webpack1，现需要升级到webpack4，特此记录下升级过程中有一些配置和需要注意的问题，具体会介绍： (1) 需要的node环境的升级 (2) mode...） 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

webpack2 终极优化

webpack2增加了一些新特性也正式发布了一段时间，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。...可以通过这以下几点做到压缩css css-loader 在webpack2里默认是没有开启压缩的，最后生成的css文件里有很多空格和tab，通过配置 css-loader?...使用 CommonsChunkPlugin 抽取公共代码 CommonsChunkPlugin可以提取出多个代码块都依赖的模块形成一个单独的模块。...要发挥CommonsChunkPlugin的作用还需要浏览器缓存机制的配合。...要使用它你需要在执行webpack的时候带上--json --profile2个参数，这代表让webpack把构建结果以json输出并带上构建性能信息，使用如下： webpack --json --profile

1.5K11 0

webpack2 终极优化

8102 0

webpack2 终极优化

webpack2增加了一些新特性也到了预发布阶段，是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。优化输出打包结果更小可以让网页打开速度更快以及简约宽带。...使用 CommonsChunkPlugin 抽取公共代码 CommonsChunkPlugin可以提取出多个代码块都依赖的模块形成一个单独的模块。...要发挥CommonsChunkPlugin的作用还需要浏览器缓存机制的配合。...插件让被依赖次数更高的模块靠前分到更小的id 来达到输出更少的代码，在webpack2里这些已经这两个插件已经被移除了因为这些功能已经被内置了。...要使用它你需要在执行webpack的时候带上--json --profile2个参数，这代表让webpack把构建结果以json输出并带上构建性能信息，使用如下： webpack --json --profile

8212 0

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

2、webpack的优势其优势主要可以归类为如下几个： 1. webpack 是以 commonJS 的形式来书写脚本滴，但对 AMD/CMD 的支持也很全面，方便旧项目进行代码迁移。 2....webpack --save-dev 我们看看下方的示例： var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin...但有时候我们希望能更加个性化一些，我们可以这样配置： 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

2K8 0

优化 Webpack 构建结果

项目的是传统的非SPA页面，我们使用了CommonsChunkPlugin来提取公共模块，保证各页面之间部分公共库可以复用缓存，同时使用UglifyJS等来保证输出文件体积的减小。...new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 5, }) ], } 但这么做粒度还太粗...2. 模块异步化首先我们来把非强依赖的模块异步化。 Webpack 1.0中可以通过 require.ensure 来实现异步文件的剥离和加载。...Webpack2则通过更标准的 import() 来实现同样的功能。...new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 4, }) ], } 值得注意的是

7389 0

webpack配置React开发环境(上)

chunk(抽出公用脚本) 当多脚本具有公共块时，可以使用CommonsChunkPlugin将公共部分提取到单独的文件中。...js"> // webpack.config.js var CommonsChunkPlugin = require("webpack/lib/optimize.../CommonsChunkPlugin"); module.exports = { entry: { bundle1: '....（2）修改webpack.config.js文件(demo15) 添加新webpack.HotModuleReplacementPlugin() 的插件添加webpack/hot/dev-server...cookbook 下回会学习总结webpack2的配置相关总结，有不错的文章欢迎分享。

2K13 0

优化 Webpack 构建结果

6483 0

5-12 webpack 性能优化（3）

, include: [ /* ... */ ], exclude: [ /* ... */ ] } ] }; exports.plugins = [ // 2)...7.3.1 webpack-parallel-uglify-plugin（webpack3使用）如果使用 webpack4，就不用关注这个了。...Only matching files get minified. // Defaults to /.js$/, any file ending in .js....Only matching files get minified....Matching files are not minified. cacheDir, // Optional absolute path to use as a cache.

1.6K5 0

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

项目的是传统的非SPA页面，我们使用了CommonsChunkPlugin来提取公共模块，保证各页面之间部分公共库可以复用缓存，同时使用UglifyJS等来保证输出文件体积的减小。...new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 5, }) ], } 但这么做粒度还太粗...2模块异步化首先我们来把非强依赖的模块异步化。 Webpack 1.0中可以通过 require.ensure 来实现异步文件的剥离和加载。...Webpack2则通过更标准的 import() 来实现同样的功能。...new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', minChunks: 4, }) ], } 值得注意的是

4092 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...}), //在async chunk 里面找到复用 >= 2次的模块再单独提取出来 new CommonsChunkPlugin({...*/ let CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; let UglifyJsPlugin = webpack.optimize.UglifyJsPlugin

1.4K3 0

【Hybrid开发高级系列】WebPack模块化专题

下面是一个例子 var webpack = require('webpack'); var commonsPlugin = new webpack.optimize.CommonsChunkPlugin...compress: { warnings: false} }) ] }; After launching the server, main.js will be minified...2>, document.getElementById('b')); index.html webpack.config.js var CommonsChunkPlugin = require(...为了把第三方库拆分出来(用标签单独加载)，我们还需要用webpack的CommonsChunkPlugin插件来把它提取一下，这样他就不会与业务代码打包到一起了。...vue2 vue-router2 webpack http://www.qinshenxue.com/article/20161106163608.html 4.4 通用代码抽取 (good)webpack

9285 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

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

1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28 2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29...2.提取公共包首先我们看下首页和商城页相同部分很不同部分 ? 几乎一模一样,好!...(), /* common 业务公共代码，vendor引入第三方 */ 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

点击加载更多

为 VUE 项目添加 PWA 解决发布后刷新报错问题

Webpack2入门

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

webpack3 升级到 webpack4 小记

webpack4：连奏中的进化

webpack3.0升级4.0

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

webpack2 终极优化

webpack2 终极优化

webpack2 终极优化

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

优化 Webpack 构建结果

webpack配置React开发环境(上)

优化 Webpack 构建结果

5-12 webpack 性能优化（3）

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

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

【Hybrid开发高级系列】WebPack模块化专题

webpack 4 升级指北

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

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐