plugin

cnpm i html-webpack-plugin -S

const webpack = require("webpack")
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const config ={
    entry:path.resolve(__dirname,'src/main.js'), // 入口文件
    output:{
        path:path.resolve(__dirname,'dist'),     // 出口文件
        filename:'bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'workpack'
        })
    ],
    mode:'development'    // 模式
}
module.exports = config;

清除不需要的文件

cnpm i clean-webpack-plugin -S

const webpack = require("webpack")
const path = require("path")
const HtmlWebpackPlugin = require("html-webpack-plugin")
const {CleanWebpackPlugin} = require("clean-webpack-plugin")
const config ={
    entry:path.resolve(__dirname,'src/main.js'), // 入口文件
    output:{
        path:path.resolve(__dirname,'dist'),     // 出口文件
        filename:'[hash]-[name]-bundle.js'
    },
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:['style-loader','css-loader']
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            title:'workpack'
        }),
        new CleanWebpackPlugin()
    ],
    mode:'development'    // 模式
}
module.exports = config;