webpack Plugin常用 optimization splitChunks UglifyJsPlugin sourceMap

很多东西容易忘记，做个简单笔记

1、webpack loader 加载顺序 从后到前
例子 ['style-loader', 'css-loader','sass-loader'] 先sass最后style2、常用插件对照
CopyWebpackPlugin 将单个文件或整个目录复制到构建目录
DefinePlugin 允许在编译时(compile time)配置的全局常量
MiniCssExtractPlugin （4.0以前 ExtractTextWebpackPlugin）从 bundle 中提取文本（CSS）到单独的文件
optimization 的 splitChunks （4.0之前 CommonsChunkPlugin）提取 chunks 之间共享的通用模块
OptimizeCSSAssetsPlugin （4.0后放在 optimization 中） css文件压缩
uglifyjs-webpack-plugin （4.0后放在 optimization 中） 插件用来缩小（压缩优化）js文件
script-ext-html-webpack-plugin 添加async，defer或module属性的<script>元素，甚至他们内联
filemanager-webpack-plugin 对应目录打成zip包
CompressionWebpackPlugin 把js压缩成 *.js.gz 压缩文件，需要服务器进行配置
webpack-bundle-analyzer 优化插件，可以看到每个文件的大小
HtmlWebpackPlugin webpack 打包用的html模版 如 index.html以下三个合用
NamedModulesPlugin 定义打包出的js名
NamedChunksPlugin 定义打包出的js对应的Chunk
HashedModuleIdsPlugin 这是 NamedModulesPlugin 的进阶模块，它在其基础上对模块路径进行 MD5 摘要，不仅可以实现持久化缓存，同时还避免了它引起的两个问题（文件增大，路径泄露）。用 HashedModuleIdsPlugin 可以轻松地实现 chunkhash 的稳定化！其他
3、vconsole-webpack-plugin 可以在移动端调试4、去掉 console.log
new UglifyJsPlugin({compress: {drop_console: !config.module.isTestPackage,// 删除所有的 `console` 语句warnings: false}
})5、打包map文件
本地开发环境 cheap-module-source-map 执行快，测试环境用 source-map
devtool: cheap-module-source-map
new UglifyJsPlugin({  sourceMap: true
}),

参考网址
网址一
网址二
网址三
网址四
sourceMap 参考网址

webpack Plugin常用 optimization splitChunks UglifyJsPlugin sourceMap相关推荐

webpack性能优化-optimization.splitChunks.chunks中的“all“、“async“和“initial“
最初,chunks(以及内部导入的模块)是通过内部 webpack 图谱中的父子关系关联的.CommonsChunkPlugin 曾被用来避免他们之间的重复依赖,但是不可能再做进一步的优化. --摘自 ...
Webpack之插件html webpack plugin
Webpack之插件html webpack plugin html-webpack-plugin插件动态生成html文件并自动引入js文件静态文件无需加载js或css文件,通过设置入口文件可以将 ...
复习webpack的常用loader
今天复习了下webpack的常用loaders,其实习惯ES6开发的话,webpack的config.js基础配置应该是比较固定: 首先是JS,我们ES6要转为ES5,需要用到babel转码: 1. ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
webpack基础+webpack配置文件常用配置项介绍+webpack-dev-server - QxQstar - 博客园
一.webpack基础 1.在项目中生成package.json:在项目根目录中输入npm init,根据提示输入相应信息.(也可以不生成package.json文件,但是package.json是很 ...
【vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud】
vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud问答
vue.config.js配置configureWebpack的optimization splitChunks页面空白
确实通过这种方式解决: vue.config.js配置configureWebpack的optimization splitChunks页面空白 - DCloud问答原因可能是这个: Taro项目 ...
【已解决】Html Webpack Plugin Error；html-withimg-loader无法正常解析html内的img
升级webpack之后发现原本之前用的好好的配置报错了: 控制台报错: ERROR in Error: Parse Error: <img src={"default":&q ...
webpack源码分析之五：sourcemap
前言经过webpack打包压缩之后的javascript, css文件和原有构建之前的文件相差比较大,对于开发者而言比较难在客户端上调试定位问题.为了解决这类问题,webpack引入了source ...

webpack Plugin常用 optimization splitChunks UglifyJsPlugin sourceMap

webpack Plugin常用 optimization splitChunks UglifyJsPlugin sourceMap相关推荐

最新文章

热门文章