webpack 插件列表 ==> 通过npm官网查看配置用法
# html-webpack-plugin
https://www.npmjs.com/package/html-webpack-plugin
# webpack默认只支持js入口,所以你打包后需要自己在打包后的文件里手动
创建一个html文件,该插件是在你打包 webpack项目之前就提供一个默认
的html模板,它有好多配置,比如帮你处理掉代码换行空格,标签属性上的双引号,
代码压缩,及打上版本号处理浏览器缓存
$ npm i html-webpack-plugin -D
# CSS 样式相关loader => style-loader css-loader (sacc-loader node-sass) less less-loader
# 只处理css style
$ npm i style-loader css-loader -D
# 使用预编译sass less
$ npm i node-sass sass-loader -D
$ npm i less less-loader -D
# 自动处理为css样式添加浏览器前缀 => autoprefixer
$ npm i postcss-loader autoprefixer -D
# 自动帮你删除你没有用到的css样式
https://www.npmjs.com/package/purify-css
$ npm i -D purifycss-webpack purify-css
# 生产环境打包进行 css压缩
https://www.npmjs.com/package/uglifyjs-webpack-plugin
$ npm i -D optimize-css-assets-webpack-plugin
# 单独抽离css 为一个单独的文件,它俩用法很不一样
$ npm i -D mini-css-extract-plugin // 4.0 新加的
$ npm i -D extract-text-webpack-plugin // 3.0
# lodash Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。
# 因为webpack 天生就可以处理普通js,loadsh 是提供了好多方法,帮你更近一步优化处理js,这个可有可无
$ npm i loadsh -D
# 对所有js进行压缩 (生产环境)
$ npm i uglifyjs-webpack-plugin -D
# 处理图片相关的file-loader
$ npm i file-loader -D
# 处理图片,字体(推荐)
$ npm i -D url-loader
# 对图片进行压缩和优化
$ npm i image-webpack-loader -D
# 处理图片成 base64
$ npm i -D url-loader
# 清除dist目录(也就是你打包后的目录)
https://www.npmjs.com/package/clean-webpack-plugin
$ npm i clean-webpack-plugin -D
# 当less文件作为入口文件,而不是在js中加载时,会额外生成无用的js文件,
该插件会删除这些文件
# https://www.npmjs.com/package/clean-webpack-plugin
$ npm i clean-webpack-plugin -D
# progress-bar-webpack-plugin 打包编译时,显示进度条
https://www.npmjs.com/package/progress-bar-webpack-plugin
$ npm i -D progress-bar-webpack-plugin
# 减少构建时间 webpack-parallel-uglify-plugin
$ npm i webpack-parallel-uglify-plugin
# 多线程执行任务加快编译速度
https://www.npmjs.com/package/happypack
$ npm install --save-dev happypack
# Babel处理 es6语法 => es5
$ npm i -D babel-loader babel-core babel-preset-env
# Babel优化
$ npm i babel-plugin-transform-runtime babel-runtim -D
# 建立.babelrc,将下边代码放入
"presets": ["env"],
"plugins": [
["transform-runtime", {
"helpers": true,
"polyfill": true,
"regenerator": true,
"moduleName": "babel-runtime"
}]
]
}
# 加载json文件 => https://www.npmjs.com/package/json-loader
$ npm i -D json-loader
# 处理Ts => https://www.npmjs.com/package/ts-loader
$ npm i ts-loader
# 打包分析优化 webpack-bundle-analyzer 打包后会出现一个地址
,让你看到你打的每个包是多大体积,很有用开发环境使用。
$ npm install --save-dev webpack-bundle-analyzer
# 拷贝一个文件到打包文件夹,该拷贝的文件不会被打包
(常用场景就是你有文档在网页上展示,需要被别人下载时)
$ npm i -D copy-webpack-plugin
# 暂时自己就玩了这么多,后续遇到再补充
总结一些用过的webpack插件列表
最新推荐文章于 2024-07-28 01:07:00 发布