2021个人webpack.config.js模板

注意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');// 删除原来的打包文件

module.exports = {
    mode: 'development',
    // mode: 'production',
    // watch: true,    // 监听文件改动并自动打包
    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内图片
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/i,
                loader: 'url-loader',
                options: {
                    name: 'images/[hash:10].[name].[ext]',
                    // base64范围 < 8kb
                    limit: 8 * 1024,
                }
            },
            {
                // 解析html内图片
                test: /\.(htm|html)$/i,
                use: [
                    {
                        // 处理html里引入的img文件，交给url-loader处理
                        loader: 'html-loader',
                        options: {
                            // url-loader默认es6解析，html-loader默认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: [
        // 删除原来的打包文件
        new CleanWebpackPlugin(),
        // html编译/压缩插件
        new HtmlWebpackPlugin({
            // 模板
            template: './src/index.html',
            // 图标
            favicon: '',
            // 压缩
            minify: {
                removeComments: true,// 移除HTML中的注释
                removeAttributeQuotes: true,// 移除属性的引号
                collapseWhitespace: true, // 是否去掉空格
                minifyJS: true, // 是否压缩html里的js，使用uglify-js进行的压缩
                minifyCSS: true, // 是否压缩html里的css，使用clean-css进行的压缩
            }
        }),
        // new HtmlWebpackPlugin(//打包第二个页面
        //     {
        //         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
    }
};