webpack中两种开发模式development 和 production 的区分打包
当我们在开发一个项目的时候，一般用development这个环境进行项目的开发，在这个打包环境下，webpack我们使用了devserve，可以帮我们起一个服务器，这个服务器里面还集成了一些HTML这样的特性，只要更改了代码，会帮我们重新打包，然后代码的内容会实时的展示在服务器对应的网页上。所以在开发环境下使用development这种方式非常的方便。但是当我们的源代码开发完成了，我们需要把代码打包上线，这个时候就需要用production这种模式。这两种模式的差异主要在什么方面呢？
1.sourcemap： 在开发环境中，sourcemap是非常全的，这样的话可以帮我们在开发环境下快速的定位代码的问题，但在production环境下代码要上线了，sourcemap不是那么重要了，所以在线上环境下，sourcemap会更加简洁一些，或者再线上环境sourcemap会生成一个.map文件进行存储。
2.压缩： 在开发环境中，打包生成的代码是不需要压缩的，可以比较具体的看到一些说明项，但是线上模式下代码一般是压缩的
如上，开发环境和线上环境的webpack配置是不同的，在打包的时候根据需要进行打包，在webpack.donfig.js来回进行需改配置显然是不方便的，我们可以给两种模式单独配置文件
首先给webpack.config.js重命名，改为webpack.dev.js,表示开发环境下的配置文件，我们再在跟目录下配置一个webpack.prod.js,表示一旦打包线上代码的时候，使用的是prod.js这个文件，将dev里面的配置内容copy到prod文件中，修改mode为production， devtool改为cheap-module-source-map,devServer没有必要存在,因为打包生成线上代码的时候，只需要将生成的文件上传到服务器即可。不要生成一个服务器启动一个服务器了。HotModuleReplacePlugin、optimization 也没有必要了。
打开package.json文件。在scripts中修改：
"scripts": {
“dev”：“webp