webpack生产环境的配置

const { resolve } = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')


//定义nodejs环境变量：决定使用browserslist的那个环境
process.env.NODE_ENV = 'production'

//复用css的loader
const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        //需要在package.json中的browserslist里面的配置，通过配置加载指定的css兼容性样式
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                ident: 'postcss',
                //打包后有兼容性样式代码
                plugins: [
                    require('postcss-preset-env')
                ]
            }
        }
    }
]

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [...commonCssLoader]
            },
            {
                test: /\.css$/,
                use: [...commonCssLoader, 'less-loader']
            },
            {
                test: /\.js$/,
                exclude: /node-modules/,
                //优先执行
                enforce: 'pre',
                //js语法检查
                loader: 'eslint-loader',
                options: {
                    fix: true
                }
            },
            //js兼容性处理
            {
                test: /\.js$/,
                exclude: /node-modules/,
                loader: 'babel-loader',
                options: {
                    //预设：指示babel做怎样的兼容性处理
                    presets: [[
                        '@babel/preset-env', {
                            //按需加载
                            useBuiltIns: "usage",
                            //指定corejs的版本
                            corejs: {
                                version: 3
                            },
                            //指定兼容性具体到哪个版本的浏览器
                            targets: {
                                chrome: "60",
                                firefox: "60",
                                ie: "9",
                                safari: "10",
                                edge: "17"
                            }
                        }
                    ]]
                }
            },
            {
                test: /\.(jpg|png|gif)/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    outputPath: 'imgs',
                    esModule: false
                }
            },
            {
                test: /\.html$/,
                //html-withimg-loader 专门处理html中的img图片的（负责引入这个图片，从而能被url-loader进行处理）
                loader: 'html-withimg-loader'
            },
            {
                //排除html/js/css资源
                exclude: /\.(css|js|html|less|png|jpg|gif)/,
                loader: 'file-loader',
                options: {
                    outputPath: 'media',
                    name: '[hash:10].[ext]'
                }
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'css/built.css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './src/index.html',
            minify: {
                //移除空格
                collapseWhitespace: true,
                //移除注释
                removeComments: true
            }
        })

    ],
    mode: 'production'
}