webpack学习记录(三)-插件

plugin是用于扩展webpack的功能，各种各样的plugin几乎可以让webpack做任何与构建先关的事情。 plugin的配置很简单，plugins配置项接收一个数组，数组里的每一项都是一个要使用的plugin的实例，plugin需要的参数通过构造函数传入。

html-webpack-plugin

根据插件中配置项 template 配置的模板文件生成dist目录下的html文件，把打包生成的js文件自动插入进去，并且可以把html代码进行压缩，去双引号等操作。

安装及配置

npm i html-webpack-plugin -D

安装好后在webpack.config.js中进行引入

const HtmlWebpackPlugin = require('html-webpack-plugin')

在webpack.config.js中的module.exports下配置如下属性

plugins:[
	new HtmlWebpackPlugin({
		template: './src/index.html',	//指定模板文件
		filename: 'index.html',			//生成文件名
		minify: {
			removeAttributeQuotes: true,	//删除属性双引号
			collapseWhitespace: true,	//压缩成一行
		},
        hash: true	//引入的时候添加哈希戳
	})
]

要想每次打包都生成不一样的文件，可以在输出属性下配置文件名 bundle.[hash:8].js

打包CSS文件

css-loader

css-loader 解释(interpret) @import 和 url() ，会 import/require() 后再解析(resolve)它们。

style-loader

style-loader将css用style标签插入到html文件中

less-loader

把less转换成css

安装

npm i style-loader css-loader -D

npm i less less-loader -D

用法

在webpack.config.js中module.exports下配置如下属性

module: {
	rule: [
		{
			test: /\.css$/,	//正则匹配以css结尾的文件
			use: ['style-loader','css-loader','less-loader']	//顺序从右向左，由严格限制，先转换解析后插入。
		}
	]
}

当我们需要在模板html里写内部样式的时候，会被style-loader覆盖，这个时候可以这样配置

module: {
	rule: [
		{
			test: /\.css$/,	//正则匹配以css结尾的文件
			use: [	//使用对象可以写入参数，执行其他操作
                {
					loader: 'style-loader',	//Loader名
					options: {
						insert: 'top'	//将样式插入到顶部
					}
            	},
			'css-loader',
			'less-loader']	//顺序从右向左，由严格限制，先解析后插入。
		}
	]
}

mini-css-extract-plugin

用来把css抽离出来并且通过link标签引入

安装并引入

npm i mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

使用

plugins:[
	new MiniCssExtractPlugin({
		filename: 'main.css',			//生成文件名
	})
],
module: {
	rules: [
		{
			test: /\.css$/,
			use: {
				MiniCssExtractPlugin.loader,	//代替style-loader
				'css-loader'
			}
		}
	]
}

如果想抽离出多个css文件只需创建多个MiniCssExtractPlugin即可。

optimize-css-assets-webpack-plugin

压缩css文件

terser-webpack-plugin

如果使用mini-css-extract-plugin的话，js文件就不会自行压缩了，因此提供了该插件给我们手动压缩js文件。

安装及使用

npm i optimize-css-assets-webpack-plugin -D

npm i terser-webpack-plugin -D

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const TerserWebpackPlugin = require('terser-webpack-plugin')

module.exports = {
	optimization: {	//优化项
		minimizer: [
            new TerserJSPlugin({}),
			new OptimizeCssAssetsWebpackPlugin({})
		]
	}
}

postcss-loader & autoprefixer

用来自动添加浏览器前缀，使用前先在package.json目录下配置浏览器属性。

安装及配置

npm i postcss-loader autoprefixer -D

创建一个postcss.config.js

// postcss.config.js

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

使用

module: {
	rule: [
		{
			test: /\.css$/,	//正则匹配以css结尾的文件
			use: ['style-loader','css-loader','postcss-loader']	//顺序从右向左，由严格限制，先转换解析后插入。
		}
	]
}

lblog_40iweqjn