webpack常用插件plugins

 

一，HtmlWebpackPlugin

HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。
安装

npm install --save-dev html-webpack-plugin

配置

//引入HtmlWebpackPlugin插件,简单创建 HTML 文件，用于服务器访问
var HtmlWebpackPlugin = require('html-webpack-plugin');

 plugins: [new HtmlWebpackPlugin({
template:'./index.html'
})]
//index.html相当于模板

二，CleanWebpackPlugin插件

当我们使用webpack打包时，如果打包多次，不去做特殊处理，打包生成的文件中就会包含上次

打包遗留的内容，后来打出的包会有多余的内容使包变大，所以我们需要借助clean-webpack-

plugin，使用这个插件，每次打包的时候，就会自动清除webpaco.config.js中output下的文件

夹。

下载

npm install clean-webpack-plugin --save-dev

配置

//引入CleanWebpackPlugin插件,清理 /dist 文件夹
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

	plugins: [
		 new CleanWebpackPlugin(),
	],

三，aotuprefixer插件

官网
Autoprefixer是一个后处理程序，不象Sass以及Stylus之类的预处理器。它适用于普通的CSS，可以实现css3代码自动补全。也可以轻松跟Sass，LESS及Stylus集成，在CSS编译前或编译后运行。
Autoprefixer 同样会清理过期的前缀

安装
autoprefixer其实是postcss提供的插件,所以要先安装postcss-loader

 npm install -D postcss-loader autoprefixer

配置

根目录创建 postcss.config.js 添加:

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

在的WebPack你可以使用postcss-loader与autoprefixer 和其他PostCSS插件。

{
				test: /\.css$/,
				use: [{
						loader: "style-loader"
					},
					{
						loader: "css-loader"
					},
					{
						loader:"postcss-loader"
					}
				]
			},{
				test:/\.styl(us)?$/,
				use: [{
						loader: "style-loader"
					},
					{
						loader: "css-loader"
					},
					{
						loader:"postcss-loader"
					},
					{
						loader: "stylus-loader"
					}]
				}