webpack生产环境配置

 

webpack.config.js

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环境变量：决定使用browserlist的那个环境
process.env.NODE_ENV = 'production';

// 复用loader
const commonCssLoader = [
    MiniCssExtractPlugin.loader,
    'css-loader',
    {
        loader:'postcss-loader',
        options:{
            postcssOptions:{
                plugins:[
                    require.resolve('postcss-preset-env')
                ]
            },
        }
    }
]

module.exports = {
    entry:'./src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            //css兼容性及单文件处理
            {
                test:/\.css$/,
                use:[...commonCssLoader]
            },
            //less兼容性及单文件处理
            {
                test:/\.less$/,
                use:[...commonCssLoader,'less-loader']
            },
            //js语法检查loader
            {
                //在package.json中eslintConfig  --> airbnb规则
                test:/\.js$/,
                exclude:/node_modules/,
                enforce:'pre',  //优先执行
                loader:'eslint-loader',
                options:{
                    //自动修复
                    fix:true,
                }
            },
            //js兼容性处理loader
            {
                test:/\.js$/,
                exclude:/node_modules/,
                use:{
                    loader:'babel-loader',
                    options:{
                        presets:[
                            ["@babel/preset-env",
                            {
                                useBuiltIns:'usage',
                                corejs:{version:3},
                                targets:{
                                    chrome:'60',
                                    firefox:'50',
                                    ie:'9',
                                }
                            }]
                        ],
                    }
                },
            },
            //图片处理
            {
                test:/\.(jpg|png|gif)/,
                loader:'url-loader',
                options:{
                    limit:8*1024,
                    name:'[hash:10].[ext]',
                    outputPath:'imgs',
                    esModule:false
                }
            },
            //html里的图片处理
            {
                test:/\.html$/,
                loader:'html-loader',
                options:{
                    esModule:false
                }
            },
            // 其他文件
            {
                exclude:/\.(js|css|less|html|img|png|gif)$/,
                loader:'file-loader',
                options:{
                    outputPath:'media'
                }
            }
        ]
    },
    plugins:[
        new MiniCssExtractPlugin({
            filename:'css/built.css'
        }),
        new OptimizeCssAssetsWebpackPlugin(),
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            minify:{
                collapseWhitespace:true,    //去掉空格
                removeComments:true,    //去掉注释
            }
        })
    ],
    mode:'production'
}