webpack生产环境基本搭建

const {resolve}=require('path');
const HtmlWebpackPlugin=require('html-webpack-plugin')
const MiniCssExtractPlugin=require('mini-css-extract-plugin')
// CSS样式兼容一般是生产模式可以修改为开发模式修改如下
process.env.NODE_ENV='development'
// css样式压缩
//const OptimizeCssAssetsWebpackPlugin=require('optimize-css-assets-webpack-plugin');
module.exports={
    entry:'./src/js/index.js',
    output:{
        filename:'js/build.js',
        path:resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    // style-loader是创建style标签，将样式放入
                    // 'style-loader',
                    // 这个loader取代style-loader，作用：提取js中的css成单独文件
                    MiniCssExtractPlugin.loader,
                    // css-loader将css文件整合到js文件中
                    'css-loader',
                    // 处理兼容问题,还需要在package.json中定义browserslist
                    {
                        loader:'postcss-loader',
                        options:{
                            ident:'postcss',
                            plugins:()=>{
                                require('postcss-preset-env')()
                            }
                        }
                    }
                ]
            },
            {
                test:/\.less$/,
                use:[
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader:'postcss-loader',
                        options:{
                            ident:'postcss',
                            plugins:()=>{
                                require('postcss-preset-env')()
                            }
                        }
                    },
                    'less-loader'
                ]
            },
            {
                // 在package.josn中eslintConfig-->airbnb
                /**
                 *    "eslintConfig":{
                 *            "extends":"airbnb-base"
                 *     }
                 */
                test:'/\.js$/',
                // 优先执行
                enforce:'pre',
                // 排除node_modules中的文件 
                exclude:/node_modules/,
                loader:'eslint-loader',
                options:{
                    // 有问题自动修复格式问题
                    fix:true
                }
            },
            {
                // 处理js兼容性问题
                test:'/\.js$/',
                exclude:/node_modules/,
                loader:'babel-loader',
                options:{
                    presets:[
                        '@babel/preset-env',//只写这个有些东西转不过来
                        {
                            useBuiltIns:'usage',
                            corejs:{version:3},
                            targets:{
                                chrome:'60',
                                firefox:'50'
                            }
                        }
                    ]
                }
            },
            {
                test:/\.(jpg|png|gif)$/,
                loader:'url-loader',
                options:{
                    limit:8*1024,
                    name:'[hash:10].[ext]',
                    outputPath:'imags',
                    esModule:false
                }
            },
            {
                test:/\.html$/,
                loader:'html-loader'
            },
            {
                exclude:/\.(js|css|html|jpg|png|gif)$/,
                loader:'file-loader',
                options:{
                    outputPath:'media'
                }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            // html压缩
            minify:{
                collapseWhitespace:true,
                removeComments:true
            }
        }),
        new MiniCssExtractPlugin({
            // 对输出的css文件进行重名名
            filename:'css/built.css'
        }),
        // 压缩css
        // new OptimizeCssAssetsWebpackPlugin()
    ],
    mode:'production'
}