合并开发 环境 配置区分打包 development || production

//   合并开发 环境 配置区分打包

npm install webpack-merge@4.1.5 -D

package.json

  "scripts": {

    "dev": "webpack-dev-server --config ./build/webpack.dev.js",

    "build": "webpack --config ./build/webpack.prod.js"

  },

根目录下创建build

  webpack.common.js

    module.exports = {

    entry:{

        main:'./src/index.js'

    },

    output:{  

        filename: '[name].js',

        path:path.resolve(__dirname,'dist')

    },

    module:{

        rules:[

            {

                test: /\.m?js$/,

                exclude: /node_modules/,

                use: {

                    loader: "babel-loader",

                    // options: {

                    //     // presets: [['@babel/preset-env',{

                    //     //     useBuiltIns:'usage',

                    //     //     targets:{

                    //     //       chrome:"67"  

                    //     //     }

                    //     // }]]

                    //     "plugins":[['@babel/plugin-transform-runtime',{

                    //         "absoluteRuntime": false,

                    //         "corejs": 2,

                    //         "helpers": true,

                    //         "regenerator": true,

                    //         "version": "7.0.0-beta.0"

                    //     }]]

                    // }

                }

            }

            ,

            {

                test:/\.(jpg|png|gif)$/,

                use:{

                    loader: 'url-loader',

                    options:{

                        name:'[name]_[hash].[ext]',

                        outputPath:'images/',

                        // 文件大于200kb 会生成文件 否则生成 base64图片格式

                        limit:204800   //200kb

                    }

                }

            },

            {

                test:/\.css$/,

                use:['style-loader','css-loader', 'postcss-loader' ]

            } ,

            {

                test:/\.scss$/,

                use:[

                    'style-loader',

                    // 'css-loader',

                    {

                        loader:'css-loader',

                        options:{

                            importLoaders:2,

                            // modules:true   // 开启modules 模块化css

                        }

                    },

                    'sass-loader',

                    'postcss-loader'

                ]

            },

            {

                test:/\.(woff2|woff|ttf)$/,

                use:{

                    loader:'file-loader'

                }

            } ,

        ]

    },

    plugins:[

        new htmlWebpackPligin({

            template:`./src/index.html`

        }),

        new cleanWebpackPligin(['dist'])

    ],

}

webpack.dev.js  

    const webpack = require('webpack')

    const merge = require('webpack-merge')

    const comonConfig = require('./webpack.common')

    const devConfig = {

        // 开发配置

        mode:'development',  

        devtool:"cheap-module-eval-source-map",  

        optimization:{

            usedExports: true

        },

        plugins:[

            new webpack.HotModuleReplacementPlugin()

        ],

        devServer:{

            contentBase:'./dist',

            open: true,

            hot:true,

            port:8080

        }

    }

    module.exports = merge(comonConfig,devConfig)

 

webpack.prod.js  

    const merge = require('webpack-merge')

    const comonConfig = require('./webpack.common')

    const prodConfig = {  

        // 线上配置

        mode:'production',  

        devtool:"cheap-module-source-map"  

    }

    module.exports = merge(comonConfig,prodConfig)