总结一些用过的webpack插件列表

			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插件列表

猜你喜欢
