webpack续集分区打包

webpack的分区

请先学习上篇文章再来看这个文章的内容，连接：webpack学习上

这个图片是分区的一个目录，这里注意webpack.json中要有些变化
这里后面的 --config后面 就是配置文件的名字

"scripts": {
    "build:dev": "webpack --config webpack.dev.js",
    "build:prod": "webpack --config webpack.prod.js",
    "dev": "webpack-dev-server --config  webpack.dev.js"
  },

webpack.base.js和上次的没有区别，只需要在新的配置文件中加入不同的配置即可

webpack.dev.js

//开发环境dev
let base = require('./webpack.base');//这是引入基础的配置文件
let {smart} = require("webpack-merge");//这就是新引入的webpack的插件，当然他需要安装
module.exports = smart(base,{
    mode:'production'//这就是代码压缩的格式上个文章有讲过
})

webpack.prod.js

//线上环境
let base = require('./webpack.base');
let {smart} = require("webpack-merge");
module.exports = smart(base,{
    mode:'development'
    //这里面还可以加入其他配置比如插件啦等等之前加的都可以
})

这样就可以分区进行处理了，避免了来回切换环境导致出错的弊端