webpack之旅: (四): webpack配置之Plugin

最新推荐文章于 2023-05-30 21:20:10 发布

一树梨花

最新推荐文章于 2023-05-30 21:20:10 发布

阅读量430

点赞数

分类专栏： webpack

本文链接：https://blog.csdn.net/qq_44746132/article/details/103651399

版权

webpack 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

什么是Plugin?

plugin的理解是插件的含义，即它是webpack打包过程中的一些插件。而实际如果我们了解vue也好，了解react也好，我们都知道这些框架中有一个叫做生命周期的概念，那么我们这里也可以勉强将plugin认为是webpack打包过程的一些生命周期，因为它实际上是在webpack打包过程执行到某一时刻去进行执行的。plugin的底层是一个类，在这个类中我们对webpack的打包做一些处理，这个类的实现带有观察者模式的设计理念，因为它需要根据webpack执行到某一时刻去执行某些操作。

plugin在webpack配置中如何使用?

在webpack中提供了一个配置参数 plgins, 该参数是一个数组，在这个数组中便可以加入我们需要配置的plugin插件了。这里我先将我们昨天使用了loader后配置的webpack.config.js的配置放到这里:

const path = require('path')

module.exports = {
	mode: "development",
	entry: path.join(__dirname, "src/main.js"),
	output: {
		filename: "bundle.js",
		path: path.join(__dirname, "dist")
	},
	devtool: "cheap-moduel-eval-source-map",
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					"style-loader",
					"css-loader"
				]
			},
			{
				test: /\.(jpg|png|jpeg|gif)$/,
				use: {
					loader: "url-loader",
					options: {
						name: "[name]_[hash:8].[ext]",
						outputPath: "images/",
						limit: 8192
					}
				}
			},
			{
				test: /\.(eot|woff|svg|ttf)$/,
				use: {
					loader: "file-loader",
					options: {
						name: "[name]_[hash:8].[ext]",
						outputPath: "fonts/"
					}
				}
			},
			{
				test: /\.js$/,
				exclude: /(node_modules)/,
				use: [{
					loader: "babel-loader",
					options: {
						presets: ["@babel/preset-env"]
					}
				}]
			}
		]
	}
}

以上就是我们上一篇博客说完后我们所配置出来的webpack的打包配置文件. 那么对于今天的plugin插件的配置使用，我将以几个常用的插件为例让大家看看如何使用就好，之后大家如果有更多的什么需求可以直接到github上查找相应的插件，并根据它官方提供的配置进行处理即可。今天我将给大家作物例子介绍的插件有：

html-webpack-plugin
clean-webpack-plugin
mini-css-extract-plugin
webpack.HotModuleReplacementPlugin

html-webpack-plugin 插件的模块是在webpack打包结束后根据我们的打包文件往我们的 dist 目录中去生成一个html文件，并自动将我们打包生成的js文件引入到这个html文件中,对它的配置如下:

const HtmlWebpackPlugin = require("html-webpack-plugin")
//.....
	plugins: [
		new HtmlWebpackPlugin({
			template: "./src/index.html",
			filenameL: "index.html",
			minify: {
				    collapseInlineTagWhitespace: true,  // 去掉生成的html文件中的空格
    				removeAttributeQuotes: true,   // 去掉html中的引号
    				removeComments: true,        // 移除html中的注释
    				//collapseWhitespace: true  // 压缩html为一行
			}
		})
	]
//.....

html-webpack-plugin中的可以配置的参数中: template 表示的是该插件生成html文件的模板，html-webpack-plugin 会根据我们指定的这个模板文件去生成dist目录中的html文件。filename 属性配置的是html-webpack-plugin打包生成的html文件的文件名. minify 属性中我们可以配置一些关于html文件个的压缩配置项: 其中的一些常用的配置在上面的代码中已经提到了，具体的含义后面也简单做了配置，而关于html-webpack-plugin的配置项大家可以到github上查看；

clean-webpack-plugin插件是在我们每次打包结束后将要放到dist目录下时，会现将我们dist目录下的内容进行清空，保证我们dist目录下的内容都是每次打包生成的最新的文件，避免先前的打包文件存在造成混淆. 它的配置如下:

const { CleanWebpackPlugin } = require("clean-webpack-plugin")
//.....
	plugins: [
		new CleanWebpackPlugin()
	]
///....

clean-webpack-plugin插件的配置时很简单的，只需要在plugins数组中new出它的实例即可(我们开始的时候说到了，plugin其实是一个类，所以我们配置时需要new出这个类的一个实例)。其实之前clean-webpack-plugin插件中可以传入一个数组作为参数，数组中指定需要被清空的文件目录，但我在实验的时候好像现在不需要了，但是可以给它配置一个对象最为参数，但实际意义并不大，所以这里我也就不过多的阐述了，感兴趣的大家可以去github上查看.

mini-css-extract-plugin插件的作用是将我们文件中引入的css文件进行单独的抽离，而不是使用style-loader将它放到html文件的<style>标签中，抽离成一个css文件后再在html文件中以 <link>标签的形式引入这个css。它的配置如下:

const MiniCssExtractPlugin = require("mini-css-extract-plugin")
//...
	plugins: [
		new MiniCssExtractPlugin()
	]

	.... 
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [
					MiniCssExtractPlugin.loader,
					"css-loader"
				]
			},
		]
	}
//...

同样配置抽css文件的这个插件配置也是很简单的，只需要直接New出它的一个实例即可，但是此时需要注意的是，我们使用这个插件抽离了css后，我们对于css文件的处理及不能使用style-loader将css放到html文件中了，此时我们需要使用MiniCssExtractPlugin.loader将我们的css以文件的形式引入到html中。当然如果我们希望对我们的css文件进行压缩，我们也可是使用一个插件叫做: optimize-css-assets-webppack-pugin, 而这个插件的配置我们需要将它放到optimization属性中，而是在plugins属性中，如下所示:

const OptimizeCssAssetsWebpackPlugin = require("optimize-css-assets-webpack-plugin")

//...
	optimization: {
		minimizer: [
			new OptimizeCssAssetsWebpackPugin({})
		]
	}
//...

对于这个压缩插件的配置我们只需要传入一个空对象就可以将它压缩为一行，而更多细致的插件大家也可以到github上进行查看即可.

webpack.HotModuleReplacementPlugin 这个插件的作用是热模块替换的插件，是webpack本身提供的。它的使用仅限于开发情况下，需要配合着webpack-dev-server进行使用，webpack-dev-server做一些参数的配置后在可以直接为我们的页面开一个服务的端口，帮助我们自动的打开浏览器展示页面，以及热模块替换等等，它的配置参数这里就不细说了，但是我们这里可以简单的配置一下:

    devServer: {
        contentBase: './dist',   // 指定webpack-dev-server启动服务的位置
        open: true,      // 启动webpack-dev-server时自动打开监听的服务
        port: 3000,      // 服务启动的端口
        hot: true,       // webpack-dev-server 进行热替换
    },

配置使用webpack-dev-server后我们打包时就需要使用webpack-dev-server命令进行打包了，使用webpack-dev-server进行打包的时候我们在dist目录下实际是看不到打包文件的，它是将打包文件放到了缓存中，这样也能有效提高它的打包速度，加快开发效率.
此时我们在配置上webpack.HotModuleReplacementPlugin热模块替换插件即可，它可以在我们的打包文件发生改变的时候自动的进行重新的打包并集合webpack-dev-server刷新我们打开的页面;

const webpack = require("webpack")
//..
 plugins: [
 	new webpack.HotModuleReplacementPlugin()   // 配置热替换
 ]
//..

这样我们的热模块替换的插件也就配置好了。

所以我们可以看到，实际上插件的配置还是很简单的，我们只需要知道哪些插件有什么作用，一些它的基本的参数配置即可，所以之后大家如果有什么需求可以去查找一些对应的插件进行配置即可。到这里我们webpack的一些基本的配置我们也就说的差不多了，之后我将以不同类型的webpack配置文件的形式为大家说到一些webpack中的其他的配置。最后如果有时间我也可以给大家说一下我们如何自己自定义一个loader或者plugin进行使用.