webpack常用插件

作者: yozosann | 来源:发表于2018-01-24 18:10 被阅读28次

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

相关文章

  • webpack(壹)

    常用webpack 插件 html-webpack-plugin css-loader style-loader...

  • 初识webpack4.x(一)

    系列文章 初识webpack(一) 初识webpack(二)之常用插件配置 初始webpack(三)之环境分离终结...

  • webpack常用打包插件

    webpack常用的打包插件 css打包插件:npm install --save-dev style-loa...

  • webpack 常用插件

    webpack提供了很多有用的原生插件 UglifyJsPlugin new webpack.optimize.U...

  • webpack常用插件

    ProgressPlugin(webpack自带):用于统计打包进度 Webpack progress using...

  • webpack 常用插件

    webpack插件分为两种,一种是内置插件,即亲儿子,不需要安装和引用可直接使用,另一种是第三方插件,需要npm安...

  • webpack常用插件

    1、terser-webpack-plugin 去掉console.log、debugger、注释 2、compr...

  • 7-webpack常用小插件

    下面记录几个webpack常用的小插件的功能和用法: 1-clean-webpack-plugin -D 在每次编...

  • Webpack 常用命令总结

    webpack和npm常用命令 常用loader的安装: 样式: 测试 常用插件的安装 编译相关loader的安装...

  • webpack踩坑之路

    webpack+babel常用包和插件 没有设置repository和descriptionnpm WARN de...

网友评论

    本文标题:webpack常用插件

    本文链接:https://www.haomeiwen.com/subject/uxauaxtx.html