webpack配置文件分离（补充）

为什么？ 因为在开发时依赖一个配置文件，真正发布时依赖另一个配置文件

首先，在项目的根目录下，建立build（自定义）文件夹，在文件夹里，建一个js文件，我暂且称为base.config.js，在这个文件里，我们将之前webpack.config.js的完整代码拷贝进来，但需要清楚，base中放置的是公共的代码，即开发时依赖，发布生产时也依赖，其中不需要存在在base中

1. 丑化js文件的代码 

new UglifyjsWebpackPlugin()       

2. 配置本地服务器的代码

devServer:{

        contentBase:'./dist',

        inline:true

    }

再在build文件夹中建立：dev.config.js（开发时依赖的文件）

                                        prod.config.js（生产时依赖的文件）

注意：在base中存在的依赖，dev和prod中则不需要存在

为了能使三个文件合并，我们需要安装-->npm install webpack-merge --save-dev

// dev.config.js--针对开发时依赖

const webpackMerge=require("webpack-merge");
const baseConfig=require('./base.config'); 

module.exports=webpackMerge(baseConfig,{
    devServer:{
        contentBase:'./dist',
        inline:true
    }
});

// prod.config.js--针对生产时依赖
const UglifyjsWebpackPlugin=require('uglifyjs-webpack-plugin');
const webpackMerge=require("webpack-merge");
const baseConfig=require('./base.config'); 

module.exports=webpackMerge(baseConfig,{
    plugins:[
        new UglifyjsWebpackPlugin()
    ]
});

修改package.json中的scripts

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

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

指定路径

注意：需要修改base.config.js中的output路径

 path:path.resolve(__dirname,'dist')---> path:path.resolve(__dirname,'../dist')