webpack study notes 4: automatically generate HTML and clean up dist

Installation dependencies

install html-webpack-plugin clean-webpack-plugin -D

Configure webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const {
    
     CleanWebpackPlugin } = require("clean-webpack-plugin");
module.exports = {
    
    
	mode: "development",
	entry: {
    
    
		main: "./src/main.js",
		test: "./src/js/test.js",
	},
	plugins: [
		// 打包前清理dist
		new CleanWebpackPlugin(),
		// 生成HTML文件并导入js和css
		new HtmlWebpackPlugin({
    
    
			title: "管理输出",
		}),
	],
	output: {
    
    
		path: `${
      
      __dirname}/dist`,
		filename: "[name].bundle.js",
	},
	module: {
    
    
		rules: [
			{
    
    
				test: /\.css$/,
				use: ["style-loader", "css-loader"],
			},
			{
    
    
				test: /\.(png|svg|jpg|gif)$/,
				use: ["file-loader"],
			},
			{
    
    
				test: /\.(woff|woff2|eot|ttf|otf)$/,
				use: ["file-loader"],
			},
		],
	},
	devServer: {
    
    
		// 监听文件的位置
		contentBase: `${
      
      __dirname}/dist`,
		compress: true,
		port: 9000,
		//允许通过外部访问
		host: "0.0.0.0",
		// 模块热替换，实现只更新局部
		hot: true,
	},
};

Generated file