plugins

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

npm install --save-dev  clean-webpack-plugin

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin')
module.exports = {
	mode: 'development',
	entry: {
		main: './src/index.js'
	},
	module: {
		rules: [{
			test: /\.(jpg|png|gif)$/,
			use: {
				loader: 'url-loader',
				options: {
					name: '[name]_[hash].[ext]',
					outputPath: 'images/',
					limit: 10240
				}
			} 
		},{
			test: /\.scss$/,
			use: [
				'style-loader', 
				{
					loader: 'css-loader',
					options: {
						// 假如你在引入css的时候使用了import 导入了css文件，
						// 默认是不走下边两个loader的,配置了这个参数就可以使用下边的loader， 
						// 0 => no loaders (default);
                        // 1 => postcss-loader;
                        // 2 => postcss-loader, sass-loader
					    importLoaders: 2, 
						modules: true, // 开启css的模块化打包
					}
				}, 
				'sass-loader',
				'postcss-loader'
			]
		}]
	},
	output: {
		filename: 'bundle.js',
		path: path.resolve(__dirname, 'dist')
	},
	plugins: [   //HtmlWebpackPlugin 该插件将为你生成一个 HTML5 文件， 在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。 只需添加该插件到你的 webpack 配置中
		new HtmlWebpackPlugin( // **在打包之后执行
			{ template: 'src/index.html' } // 生成的html文件默认以index.html为模板，并把响应的js添加到里边
			), 
	    new CleanWebpackPlugin(['dist']) ], // 每次打包之前会将dist文件夹下文件清除 **在打包之前执行
}