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文件夹下文件清除 **在打包之前执行
}