webpack插件

使用详情见链接

loader

插件	功能	依赖于
处理css
style-loader	将CSS添加到DOM的内联样式标签style里
css-loader	将CSS文件通过require的方式引入
less–loader	处理less
sass-loader	处理sass
postcss-loader postcss-preset-env	css兼容性处理
处理图片
url-loader	打包样式图片
html-loader	打包html图片
js兼容性
@babel/preset-env	js基本兼容性处理	babel-loader @babel/core
@babel/polyfill	js全部兼容性处理(体积过大)
core-js	js兼容性按需加载
其他
eslint-loader	eslint语法检检查	eslint eslint-config-airbnb-base eslint-plugin-import
thread-loade	多线程打包

plugins

插件	功能
clean-webpack-plugin	清空上一次打包文件
html-webpack-plugin	将打包出来的js文件引入进html文件
抽取css
mini-css-extract-plugin	抽取css样式到单个css文件
extract-text-webpack-plugin@next	提取多个css文件
压缩
optimize-css-assets-webpack-plugin	压缩css
将环境改为生产环境	压缩js和html
其他
workbox-webpack-plugin	PWA(离线访问)
add-asset-html-webpack-plugin	dll(库打包)

其他

插件	功能	依赖于/注释
webpack-dev-server	打包热更新