webpack配置参考

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
let MiniCssExtractPlugin = require('mini-css-extract-plugin'); // css 抽离
// 注意这里需要生产环境才可压缩
let OptimizeCss = require("optimize-css-assets-webpack-plugin"); // css 压缩
let UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // js压缩

let webpack = require("webpack");

module.exports = {
    optimization: { // 优化项
        minimizer: [
            new OptimizeCss(), // css 压缩
            new UglifyJsPlugin({
                cache: true, // 是否启用缓存
                parallel: true, // 是否并发打包
                sourceMap: true, // map文件映射
            })
        ]
    },
    entry: './src/index.js',
    output: {
        // filename: 'bundle.[hash:8].js', // 哈希
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
        // publicPath: 'http://pqenxwgl4.bkt.clouddn.com'  // 所有资源加上http://pqenxwgl4.bkt.clouddn.com前缀
    },
    devServer: {
        hot: true, // 启用热更新
        port: 3000,
        progress: true,
        contentBase: './build',
        compress: true,
        proxy: {    // 服务器代理
            '/api': {
                target: 'https://www.baidu.com',
                // pathRewrite: {'/api', ''}
            },
        }
    },
    mode: 'development', // production development;
    plugins: [ // webpack插件
        new HtmlWebpackPlugin({
            template: './src/index.html', // 模板
            filename: 'index.html', // 打包后文件名
            // minify: {
            //     removeAttributeQuotes: true, // 删除html属性双引号
            //     collapseWhitespace: true, // 折叠成一行
            // },
            hash: true, // 加上哈希后缀
        }),
        new MiniCssExtractPlugin({
            filename: 'css/main.css',
        }),
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.NamedModulesPlugin(), // 打印更新的模块路劲
        new webpack.HotModuleReplacementPlugin(), // 热更新插件
    ],
    module: { // 模块
        noParse: /jquery/, // 不去解析jquery中的依赖库
        rules: [ // 规则 css-loader 解析 @import这种语法
            // style-loader 他是把css插入到head的标签中
            // loader的特点 希望单一
            // loader的用法 字符串只用一个loader
            // 多个loader需要[]
            // loader的顺序 默认是从右向左执行 从下到上执行
            // loader还可以写成 对象方式
            {
                test: /\.css$/,
                // exclude: /node_modules/, // 排除
                // include: path.resolve('src'), // 包含
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
            },
            {
                // 处理less文件  npm i less less-loader -D
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader']
            },
            {
                // 处理 sass文件 npm i node-sass sass-loader -D
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader']
            },
            {
                // img 静态文件
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        limit: 1,
                        outputPath: '/images/',
                        publicPath: 'http://pqenxwgl4.bkt.clouddn.com'
                    }
                }
            }, 
            {
                //  页面静态文件
                test: /\.html$/,
                use: 'html-withimg-loader'
            },
            {
                // ES6 => ES5 npm i babel-loader @babel/core @babel/preset-env -D
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            '@babel/preset-env'
                        ]
                    }
                },
                exclude: [
                    path.resolve(__dirname, './node_modules')
                ]
            }
        ]
    }
}