-
Notifications
You must be signed in to change notification settings - Fork 118
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Webpack 插件总结归类 #17
Comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
功能类
html-webpack-plugin
自动生成html,基本用法:
copy-webpack-plugin
拷贝资源插件
基本用法:
webpack-manifest-plugin && assets-webpack-plugin
俩个插件效果一致,都是生成编译结果的资源单,只是资源单的数据结构不一致而已。
webpack-manifest-plugin 基本用法:
assets-webpack-plugin 基本用法:
clean-webpack-plugin
在编译之前清理指定目录指定内容。
基本用法:
compression-webpack-plugin
提供带 Content-Encoding 编码的压缩版的资源。
基本用法:
progress-bar-webpack-plugin
编译进度条插件
基本用法:
代码相关类
webpack.ProvidePlugin
自动加载模块,如 $ 出现,就会自动加载模块;$ 默认为'jquery'的exports
用法:
webpack.DefinePlugin
定义全局常量
用法:
mini-css-extract-plugin && extract-text-webpack-plugin
提取css样式,对比:
基本用法 extract-text-webpack-plugin:
基本用法 mini-css-extract-plugin:
编译结果优化类
wbepack.IgnorePlugin
忽略regExp匹配的模块
用法:
uglifyjs-webpack-plugin
代码丑化,用于js压缩
用法:
optimize-css-assets-webpack-plugin
css压缩,主要使用 cssnano 压缩器
用法:
webpack-md5-hash
使你的chunk根据内容生成md5,用这个md5取代 webpack chunkhash。
SplitChunksPlugin
CommonChunkPlugin 的后世,用于chunk切割。
webpack 把 chunk 分为两种类型,一种是初始加载initial chunk,另外一种是异步加载 async chunk,如果不配置SplitChunksPlugin,webpack会在production的模式下自动开启,默认情况下,webpack会将 node_modules 下的所有模块定义为异步加载模块,并分析你的 entry、动态加载(import()、require.ensure)模块,找出这些模块之间共用的node_modules下的模块,并将这些模块提取到单独的chunk中,在需要的时候异步加载到页面当中,其中默认配置如下:
编译优化类
DllPlugin && DllReferencePlugin && autodll-webpack-plugin
dllPlugin 将模块预先编译,DllReferencePlugin 将预先编译好的模块关联到当前编译中,当 webpack 解析到这些模块时,会直接使用预先编译好的模块。
autodll-webpack-plugin 相当于 dllPlugin 和 DllReferencePlugin 的简化版,其实本质也是使用 dllPlugin && DllReferencePlugin,它会在第一次编译的时候将配置好的需要预先编译的模块编译在缓存中,第二次编译的时候,解析到这些模块就直接使用缓存,而不是去编译这些模块。
dllPlugin 基本用法:
DllReferencePlugin 基本用法:
autodll-webpack-plugin 基本用法:
happypack && thread-loader
多线程编译,加快编译速度,thread-loader不可以和 mini-css-extract-plugin 结合使用。
happypack 基本用法:
thread-loader 基本用法:
hard-source-webpack-plugin && cache-loader
使用模块编译缓存,加快编译速度。
hard-source-webpack-plugin 基本用法:
cache-loader 基本用法:
编译分析类
webpack-bundle-analyzer
编译模块分析插件
基本用法:
stats-webpack-plugin && PrefetchPlugin
stats-webpack-plugin 将构建的统计信息写入文件,该文件可在 https://webpack.github.io/analyse中上传进行编译分析,并根据分析结果,可使用 PrefetchPlugin 对部分模块进行预解析编译(本人也不理解这个plugin,据说优化效果不明显,有兴趣的同学请见 how-to-optimize-webpacks-build-time-using-prefetchplugin-analyse-tool)。
stats-webpack-plugin 基本用法:
PrefetchPlugin 基本用法:
speed-measure-webpack-plugin
统计编译过程中,各loader和plugin使用的时间。
The text was updated successfully, but these errors were encountered: