webpack学习webpack让前端飞

webpack常用插件

2018-01-24  本文已影响28人  yozosann

ProgressPlugin(webpack自带):用于统计打包进度

Webpack progress using node.js API

IgnorePlugin(webpack自带):忽略本地的一些模块

https://webpack.js.org/plugins/ignore-plugin/

CleanWebpackPlugin:清理指定目录的文件

http://npm.taobao.org/package/clean-webpack-plugin

DllPlugin(webpack自带):预打包文件

webpack进阶——DllPlugin优化打包性能(基于vue-cli)

DllReferencePlugin(webpack自带):项目打包引用预打包生成的文件

webpack进阶——DllPlugin优化打包性能(基于vue-cli)

AssetsWebpackPlugin:为打包生成的js等生成路径引用指引

http://npm.taobao.org/package/assets-webpack-plugin

HappyPack:运用多核加速打包

happypack

ExtractTextPlugin:将打包中的css单独抽离出来

extract-text-webpack-plugin

EnvironmentPlugin(webpack自带):在webpack层面定义项目中可以使用的全局变量

http://www.css88.com/doc/webpack2/plugins/environment-plugin/

DefinePlugin(webpack自带):在webpack层面定义项目中可以使用的全局变量 与EnvironmentPlugin的形式不同而已

https://segmentfault.com/a/1190000011530718

http://www.css88.com/doc/webpack2/plugins/define-plugin/

ProvidePlugin(webpack自带):自动加载模块。 任何时候,当 identifier 被当作未赋值的变量时, module 就会自动被加载,并且 identifier 会被这个 module 输出的内容所赋值

http://www.css88.com/doc/webpack2/plugins/define-plugin/

CopyWebpackPlugin:将指定目录的文件赋值到指定目录下

https://www.npmjs.com/package/copy-webpack-plugin1

CommonsChunkPlugin(webpack自带optimize)将部分包单独打包为一个文件,高效利用缓存

webpack进阶——缓存与独立打包

HotModuleReplacementPlugin(webpack自带):热更新模块

NoEmitOnErrorsPlugin(webpack自带):在编译出现错误时,使用它来跳过输出阶段。这样可以确保输出资源不会包含错误

https://webpack.js.org/plugins/no-emit-on-errors-plugin/#src/components/Sidebar/Sidebar.jsx

NamedModulesPlugin(webpack自带):为每个包hash命名

webpack进阶——缓存与独立打包

HtmlWebpackPlugin:webpack打包后自动生成html页面

https://www.npmjs.com/package/html-webpack-plugin

HtmlWebpackIncludeAssetsPlugin:加强版,可以订制访问路径

https://www.npmjs.com/package/html-webpack-include-assets-plugin

ParallelUglifyPlugin:加速压缩

https://www.npmjs.com/package/webpack-parallel-uglify-plugin

上一篇下一篇

猜你喜欢

热点阅读