webpack學習記錄(三)-插件

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']	//順序從右向左，由嚴格限制，先轉換解析後插入。
		}
	]
}