webpack 生产环境配置(无注释)

Posted HLLZ

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了webpack 生产环境配置(无注释)相关的知识,希望对你有一定的参考价值。

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,
    }
}

 

以上是关于webpack 生产环境配置(无注释)的主要内容,如果未能解决你的问题,请参考以下文章

[万字逐步详解]使用 webpack 打包 vue 项目(优化生产环境)

一个十分简单的关于生产环境和开发环境的webpack配置

小议webpack下的AOP式无侵入注入

webpack 生产环境相关

webpack 生产环境相关

webpack优化环境配置