webpack 生产环境配置（无注释）

Posted 2020-12-09 HLLZ

const { resolve } = require(‘path‘)
const MiniCssExtractPlugin  =require(‘mini-css-extract-plugin‘)
const htmlWebpackPlugin = require(‘html-webpack-plugin‘)
const OptimizeCssAssetsWebpackPlugin = require(‘optimize-css-assets-webpack-plugin‘)

process.env.NODE_ENV = ‘production‘;

const commenCssLoader=[
    MiniCssExtractPlugin.loader,
    ‘css-loader‘,
    {
        loader:‘postcss-loader‘,
        options: {
            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:[...commenCssLoader]
            },
            {
                test:/.less$/,
                use:[...commenCssLoader,‘less-loader‘]
            },
            {
                test:/.js$/,
                exclude:/node_modules/,
                use:[
                    {
                        loader:‘babel-loader‘,
                        options:{
                            presets:[
                                [
                                    ‘@babel/preset-env‘,
                                    {
                                        useBuiltIns:‘usage‘,
                                        corejs:{version:3},
                                        targets:{
                                            chrome:‘70‘,
                                            firefox:‘62‘,
                                            ie:‘9‘,
                                            safari:‘10‘,
                                            edge:‘17‘,
                                        }
                                    }
                                ]
                            ]
                        }
                    },
                    {
                        // //优先执行
                        // enforce:‘pre‘,
                        loader:‘eslint-loader‘,
                        options:{
                            fix:true
                        }
                    },
                ]
            },
            {
                test:/.(jpg|png|gif)$/,
                loader:‘url-loader‘,
                options:{
                    limit:8*1024,
                    name:‘[hash:10].[ext]‘,
                    outputPath:‘imgs‘,
                    //esModule:false
                }
            },
            {
                test:/.html$/,
                loader:‘html-loader‘
            },
            {
                exclude:/.(css|html|js|jpg|png|gif|less|sass)$/,
                loader:‘file-loader‘,
                options:{
                    name:‘[hash:10].[ext]‘,
        　　　　　　　　outputPath:‘media‘//配置输出文件夹
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:‘./src/index.html‘,
            minify: {
                collapseWhitespace:true,
                removeComments:true,
            }
        }),
        new MiniCssExtractPlugin({
            filename:‘css/built.css‘
        }),
        new OptimizeCssAssetsWebpackPlugin()
    ],
    mode:‘production‘,
    devServer:{
        contentBase:resolve(__dirname,‘build.js‘),
        compress:true,
        port:3000,
        open:true,
    }
}