webpack配置文件的抽离

目的：把开发时用到的配置文件和生产时用到的配置文件进行分离。

1.新建build文件夹存放配置文件，然后新建base.config.js文件并将webpack.config.js代码拷进来。

2.再建两个配置文件：prod.config.js和dev.config.js文件。

其中，base用来存放公共的配置；prod用来放生产时的配置；dev用来放开发时的配置。

base+dev用于开发，base+prod用于生产发布

安装插件：

npm install --save-dev webpack-merge@4.1.5

配置文件：

dev.config.js

const WebpackMerge = require('webpack-merge')//导入webpack-merge插件
const baseConfig = require('./base.config')//导入base.config.js

module.exports = WebpackMerge(baseConfig,{
  devServer:{
    contentBase:'./dist',//服务于本地的哪一个文件夹，dist最终打包的文件夹
    inline:true//实时刷新页面
  }
})

prod.config.js

const WebpackMerge = require('webpack-merge')//导入webpack-merge插件
const baseConfig = require("./base.config")
const UglifyjswebpackPlugin = require("uglifyjs-webpack-plugin")

module.exports = WebpackMerge(baseConfig,{
  plugins:[
    new UglifyjswebpackPlugin ()
  ]
})

然后删除webpack.config.js文件，在package.json文件中修改脚本

打包运行：npm run build

开发调试：npm run dev

此时打包的dist文件夹在build文件目录下，因为base.config.js中的配置： 

 修改后：