webpack4简单的配置

最新学习webpack4,下面是我最近最新配置

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
let MiniCssExtractPlugin = require('mini-css-extract-plugin')
let OptimizeCss = require('optimize-css-assets-webpack-plugin')
let UglifyJsPlugin = require('uglifyjs-webpack-plugin')
let CleanWebpackPlugin = require('clean-webpack-plugin')   
// let CopyWebpackPlugin = require('copy-webpack-plugin')
let HappyPack = require('happypack')  //多线程打包
let webpack = require('webpack')
let env = process.env.NODE_ENV == "development" ? "development" : "production";
module.exports = {
    // 为production时优化
    optimization:{   //优化减小css,js体积
        minimizer:[
            new UglifyJsPlugin({
                cache:true,  //是否加缓存
                parallel:true,//并发打包
                sourceMap:true   //源码映射
            }),
            new OptimizeCss()
        ]
    },
    devServer:{
        port:3000, //端口号
        progress:true,  //可以看到进度条
        contentBase:'./build',  //指定目录运行静态
        compress:true, //体积压缩
        open:true,
        // host:'0.0.0.0'
        headers:{
            'xxx':'123'
        },
        overlay: true, //编译出错会显示
        hot:true,  //热更新
        // proxy:{  //解決跨域
        //     '/api':{
        //         target:'XXXXXXXXX',
        //         changeOrigin: true,  //是否跨域
        //         pathRewrite:{
        //             '^/api':''   //重写api 
        //         }
        //     }
        // }

    },
    resolve:{
        extensions:['.js','.css','.json'],  
        alias:{
            '@':path.resolve(__dirname,'src')   //設置別名
        }
    },
    // mode:'development',//模式
    mode:env,
    entry:'./src/index.js',//入口
    output:{
        filename:'build.[hash:8].js',
        path:path.resolve(__dirname,'dist')
    },
    // devtool:'source-map',//源码映射 会调换到报错的信息行和列  打包会产生map 文件
    // devtool:'eval-source-map',//源码映射 会调换到报错的信息行和列  打包不会生成map
     //生成map文件，源码映射
    devtool:env=='development'?'source-map':'',
    module:{ //模塊
        rules:[
            {
                test:/\.html$/,    //html 中图片路劲
                use:{
                    loader:'html-withimg-loader' ,
                }
            },
            {
                test:/\.(png|jpg|gif)$/,
                use:{
                    loader:'url-loader' ,
                    options:{
                        limit:45*1024,  //限制小于多大的时候用base64 来转换
                        outputPath:'img/',   //打包图片目录
                        // publicPath:'http://XXXX'  //提高网络性能
                    }
                }
            },
            {
                test:/\.js$/,
                include:path.resolve(__dirname,'src'),
                exclude:path.resolve(__dirname,'node_modules'),
                use:'happypack/loader?id=js'
            },
            {   //css-loader    sttyle-loader
                test:/\.css$/,
                use:[ 
                    {
                        loader:'style-loader',
                        options:{
                            insertAt:'top'   //自己写的样式比别人的优先级要高
                        }
                    }
                    ,
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                ],
                // include:path.resolve(__dirname,'src')    命中 src 目录下的
                // exclude:path.resolve(__dirname,'node_modules')  排除node_modules里的

            },
            {   //css-loader    sttyle-loader
                test:/\.less$/,
                use:[
                    {
                        loader:'style-loader',
                        options:{
                            insertAt:'top'   //自己写的样式比别人的优先级要高
                        }
                    }
                    ,
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',  //兼容加前缀的
                    'less-loader'
                ],
            }
        ]
    },
    plugins:[  //webpack插件
        new HtmlWebpackPlugin({
            template:'./src/index.html',  //模块
            filename:'index.html',  // 打包后的名字
            minify:{
                removeAttributeQuotes:true, //去双引号
                collapseWhitespace:true, //成一行
            },
            hash:true,
        }),
        new MiniCssExtractPlugin({   //抽离出来css
            filename:'main.css'
        }),
        new webpack.ProvidePlugin({   //注入第三方模块
            // $:'jquery'
        }),
        new CleanWebpackPlugin(),   // 打包删除之前的代码
        new webpack.BannerPlugin('make 2019/5/2 shenqi'),
        new HappyPack({   //針對多綫程打包
            id:'js',
            use:[
                {
                    loader:'babel-loader' ,
                    options:{
                        presets:[
                            '@babel/preset-env'
                        ],
                        plugins:[
                            '@babel/plugin-proposal-class-properties',   //转化es6语法
                            '@babel/plugin-syntax-dynamic-import'  //懶加載
                        ]
                    }
                }
            ]
        }),
        new webpack.HotModuleReplacementPlugin()    //熱跟新插件
    ]
}`

补充说明下，process.env.NODE_ENV 这里的NODE_ENV是undefiend,我是这样解决的。
安装一个cross-env 然后在 package.json里面的scripts里面这么写

  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js",
    "dev": "cross-env NODE_ENV=development webpack-dev-server"
  },

然后每次npm run build 或者npm run dev 就是分别代表production与development模式。
以上是个人配置的一点见解，有不足希望指出。