webpack 使用 plugin 让打包更方便

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 目录，直接打包。

webpack 使用 plugin 让打包更方便

猜你喜欢