webpack 使用 plugin 让打包更方便

最新推荐文章于 2024-08-04 09:50:28 发布

purple_lumpy

最新推荐文章于 2024-08-04 09:50:28 发布

阅读量239

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/purple_lumpy/article/details/88528580

本文介绍如何使用Webpack插件简化开发流程，包括自动生成HTML文件和清理旧的构建目录。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

plugin 可以在webpack 运行到某一时刻时，做一些事情。有点想vue, react 中的生命周期函数。

比如下面的 “HtmlWebpackPlugin”，会在每次打包完成后，增加 html 文件。

额，每次webpack 打包的时候如果先把原来打包的文件删除，那么里面的index.html 文件就要先拿出来，再放进入，甚麻烦。

我们可以使用webpack插件，让这个步骤，不用自己来操作。

这个插件是 “HtmlWebpackPlugin” ，可以在 webpack 官网的 documentation > plugins 中查找它的使用方法。

首先下载，这个插件

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

然后我们去webpack.config.js 中设置。它需要引入和实例化。如下。

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

module.exports = {
	mode: "development",
	entry: "./src/index.js",
	module: {
		rules: [{
			test: /\.(png|jpg|gif)$/,
			use: {
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'imgs/'
				}
			}
		},{
			test: /\.scss$/,
			use: ['style-loader',
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2,
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader']
		}]
	},
	output: {
		filename: 'main.js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [new HtmlWebpackPlugin()]
}

好啦，这时候打包，就能自动生成 index.html 文件。

HtmlWebpackPlugin 这个插件，可以自动在打包完成后，生成index.html 文件。然后，把打包生成的js 文件，自动引入到这个html 文件中。

注：这个html 是个空文件，没有html 内容。如下。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Webpack App</title>
  </head>
  <body>
  <script type="text/javascript" src="main.js"></script></body>
</html>

但我们希望html 里面是有默认的内容的，这时候，我们可以在webpack.config.js 中配置。

我们现在src 目录下，新建一个index.html，代码如下。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>模板</title>
  </head>
  <body>
  	<div id="root"></div>
  </body>
</html>

然后，在webpack.config.js 中配置如下。

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

module.exports = {
	mode: "development",
	entry: "./src/index.js",
	module: {
		rules: [{
			test: /\.(png|jpg|gif)$/,
			use: {
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'imgs/'
				}
			}
		},{
			test: /\.scss$/,
			use: ['style-loader',
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2,
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader']
		}]
	},
	output: {
		filename: 'main.js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [new HtmlWebpackPlugin({
		template: 'src/index.html'
	})]
}

然后就可以删掉 dist 目录，直接打包。

第二个案例，我们希望每次打包前，都能自动删除以前打包的文件夹。这个也需要借助一个plugin "cleanWebpackPlugin"，但它不在webpack 官网的plugins 中，它是一个第三方的 plugin。它的github:https://github.com/johnagan/clean-webpack-plugin#options-and-defaults-optional

先来安装，使用命令 npm install clean-webpack-plugin --save-dev

安装好了之后，我们来配置一下。打开 webpack.config.js ，引入clean-webpack-plugin 模块，再实例化。如下。

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
	mode: "development",
	devtool: "cheap-module-source-map",
	devServer: {
		contentBase: './dist'
	},
	entry: {
		main: "./src/index.js"
	},
	module: {
		rules: [{
			test: /\.(png|jpg|gif)$/,
			use: {
				loader: 'file-loader',
				options: {
					name: '[name].[ext]',
					outputPath: 'imgs/'
				}
			}
		},{
			test: /\.scss$/,
			use: ['style-loader',
				{
					loader: 'css-loader',
					options: {
						importLoaders: 2,
						modules:true
					}
				},
				'sass-loader',
				'postcss-loader']
		}]
	},
	output: {
		// publicPath: "http://cdn.com.cn",
		filename: '[name].js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [new HtmlWebpackPlugin({
		template: 'src/index.html'
	}), new CleanWebpackPlugin()]
}

好啦，现在每次打包前，都会把之前的打包文件夹先给删掉了。