注意webpack禾蚕、webpack-cli资铡、webpackde-server等包的版本
以下是我的版本

"devDependencies": {
        "clean-webpack-plugin": "^4.0.0-alpha.0",
        "css-loader": "^5.2.4",
        "file-loader": "^6.2.0",
        "html-loader": "^1.3.2",
        "html-webpack-plugin": "^4.3.1",
        "node-sass": "^4.0.0",
        "sass-loader": "^9.0.1",
        "style-loader": "^2.0.0",
        "url-loader": "^4.1.1",
        "webpack": "^4.46.0",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.2"
    }

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');// html文件打包咽筋，壓縮
const { CleanWebpackPlugin } = require('clean-webpack-plugin');// 刪除原來(lái)的打包文件

module.exports = {
    mode: 'development',
    // mode: 'production',
    // watch: true,    // 監(jiān)聽(tīng)文件改動(dòng)并自動(dòng)打包
    entry: path.join(__dirname, 'src', 'index'),
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: './',
        filename: "bundle.js",
        chunkFilename: '[name].js'
    },
    module: {
        rules: [
            {
                // 解析css
                test: /\.css$/i,
                use: [
                    'style-loader',
                    'css-loader'
                ]
            },
            {
                // 解析sass
                test: /\.scss$/i,
                use: [
                    'style-loader',
                    'css-loader',
                    'sass-loader'
                ]
            },
            {
                // 解析css內(nèi)圖片
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/i,
                loader: 'url-loader',
                options: {
                    name: 'images/[hash:10].[name].[ext]',
                    // base64范圍 < 8kb
                    limit: 8 * 1024,
                }
            },
            {
                // 解析html內(nèi)圖片
                test: /\.(htm|html)$/i,
                use: [
                    {
                        // 處理html里引入的img文件们妥，交給url-loader處理
                        loader: 'html-loader',
                        options: {
                            // url-loader默認(rèn)es6解析拥刻，html-loader默認(rèn)commonjs解析
                            // 解析為[object Module]
                            esModule: false
                        }
                    }
                ]
            },
            {
                // 解析其他資源潭辈，直接hash拷貝
                exclude: /\.(js|css|scss|png|jpe?g|gif|svg|htm|html)$/i,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]'
                }
            }
        ]
    },
    plugins: [
        // 刪除原來(lái)的打包文件
        new CleanWebpackPlugin(),
        // html編譯/壓縮插件
        new HtmlWebpackPlugin({
            // 模板
            template: './src/index.html',
            // 圖標(biāo)
            favicon: '',
            // 壓縮
            minify: {
                removeComments: true,// 移除HTML中的注釋
                removeAttributeQuotes: true,// 移除屬性的引號(hào)
                collapseWhitespace: true, // 是否去掉空格
                minifyJS: true, // 是否壓縮html里的js，使用uglify-js進(jìn)行的壓縮
                minifyCSS: true, // 是否壓縮html里的css盏档，使用clean-css進(jìn)行的壓縮
            }
        }),
        // new HtmlWebpackPlugin(//打包第二個(gè)頁(yè)面
        //     {
        //         template: './app/src/page/index2.html',
        //         filename:'./page/index2.html'//指定輸出路徑和文件名
        //     }
        // )
    ],
    devServer: {
        // 
        publicPath: '/',
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        hot: true,
        hotOnly: true,
        port: 3000,
        open: true
    }
};