码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2020-06-06 11:22:41      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:output   rem   bpa   for   enc   url   ESS   生产   roc   

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 生产环境配置(无注释)

标签:output   rem   bpa   for   enc   url   ESS   生产   roc   

原文地址:https://www.cnblogs.com/hllzww/p/13053758.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!