通过对webpack1.0.0——webpack1.0.7的配置，已经可以做自己的一个小项目了。虽然在工程化方面，这样的配置是不能使用的。但随着webpack的更新，最终会从工程化方面去配置webpack。
webpack - Tree Shaking
webpack从2.0之后就推出了 ‘摇树’ 的概念，比如通过import ES Moudle的方式引入js文件中的一个方法。而最终打包后，webpack会把整个引用的js文件都作打包处理，这是不符合工程化的配置的。 ⚠️
⚠️还记得，前一篇中，我说过import和require的不同吗？最后我拿了‘摇树’作为例子。‘摇树‘是不支持 Common Js这种方式引入的。
在development开发模式下,webpack需要在webpack.config.js中配置‘摇树’ usedExports
usedExports //被使用的模块
打开package.json，配置sideEffects。
saidEffects //如果使用import引入babel的方式处理ES6语法时，babel是在window上绑定了内容。而baberc并没有导出任何的模块或者内容，所以在使用‘摇树’打包时，webpack会认为这是无用的，所以就会忽略，这样就会产生问题。但按照我配置的webpack来操作，并没有引入任何的第三方模块在js文件中使用，所以配置了false。false就是对所有的模块都使用‘摇树’的方式来打包。⚠️
⚠️当你以引入的方式处理模块时。可用数组方式，让‘摇树’对数组中的模块内容都要打包。
["*.css"] //对所有的css文件都不使用‘摇树’的方式来打包。
在线上模式 production 的环境中，webpack已经帮我们配置了optimization的配置，所以optimization的配置可以去除。而package.json中的 saidEffects还需要配置。
webapck - Develoment/Production
通过对‘摇树’的了解和配置，可以看出开发模式和线上模式的区别。
1.开发环境中 sourceMap是非常全面的，可以快速定位问题。线上模式下sourceMap可以配置的简单一些，生成.map文件来存储。
2.开发环境下，代码不压缩。
3.开发环境中需要配置‘摇树’，而线上环境中不需要‘摇树’。
4开发环境下，不需要再开启服务器DevServer和热更新。
去除以上的区别就是相同的配置了。而在不同的环境下切换还需要手动的更改配置，其实可以把webpack分拆为几个js文件，在package.json文件中执行不同的命令，就可以在任意的模式下开发，测试，打包上线。
新建 webpack.prod.js文件
去除开发模式下不需要的配置项。
把webpack.comfig.js文件重命名为 webpack.dev.js,配置项不做修改。
打开package.json文件，修改scripts配置项。
npm run dev // 运行dev指令。
webpack-dev-server // 启动一个服务器。
--config webpack.dev.js //启动配置项为 webpack.dev.js文件。
npm run bunild //运行bundle指令。
webpack // 使用webpack打包。
--config webpack,prod.js // 启动配置项为 webpack.prod.js文件。
⚠️两个webpackConfig文件中有一些相同的代码，这是在项目工程化中不允许出现的情况。
终端输入 npm install webpack-merge -D 下载webpack合并插件
新建 webpack.common.js 文件。把重复的代码放入 webpack.common.js 文件中。
相同代码 //入口文件,module,plugins,output。
webpack.dev.js
webpack .pro.js
merge //合并模块
module.exports //导出内容为基础配置和不同模式下配置相结合。
⚠️而使用vue-cil创建项目时，你会发现Vue把三个webpack配置文件统一放到了build文件下。为了方便管理这三个文件，根目录新建一个build文件夹，把webpack.dev.js,webpack.prod.js和webpack.common.js文件移动到build文件夹下。
这时需要修改 package.json文件。// webpackCongfig的地址。
修改输出output配置，// 在bundle文件外生成dist文件夹。
输出文件修改后，清理打包文件的 clean-webapck-plugin也需要重新的配置。
root //由于把webpackConfig文件放进build文件夹中了，webpack会认为bunild已经是最顶级的目录了，所以在配置时是不能写 ..dist 的,但是clean-webpack-plugin提供了一个root的配置，也就是路径的配置，这样就可以删除与bunild同级的dist文件夹了。
此上就是开发环境和线上环境的不同。
