webpack配置

一、source map

source map:webpack的一个非常重要的配置参数，可以在开发的时候产生相当有帮助和重要的信息

1. 引入source map的原因
   当把所有的文件都打包到一个文件中，在浏览器中调试，是不是非常不爽，不知道在源码中的哪个文件的哪行出了bug，再加上如果有编译的过程就更苦逼了，比如es6或coffeescript转js。source map的作用就是解决这个困境的，就是在浏览器中出现问题时能够自动映射到源文件中，知道是哪个文件的哪一行出了问题。是不是非常有用？
2. source map的配置以及不同配置的区别
   在webpack配置object中是通过devtool来设置sourcemap的，这里有几个选择，下面我们来具体解释他们之间的区别吧

 1. source-map 这个是产生一个完整的全面的source map，这个选项的效果最好，
 但是它会降低build的效率
 
  2. cheap-module-source-map 这个是选项也是单独产生一个source map文件，
 但是去掉了具体列的信息，所以会降低调试的方便，却提高了build的效率。
 
3.eval-source-map bundle源代码是利用'eval', source map完整的和bundle的结果
在同一个文件中。这个有很好的调试效果，同时不影响build的效率，但是可能会有
执行效率和安全的缺点，但是在开发的过程是一个很好的选择。

4.cheap-module-eval-source-map 这个是build效率最高的方式，和eval-source-map相似，
但是去掉了具体的列的信息。和eval-source-map相似，它有执行效率和安全性的缺点，
所以不适合用在生产环境中。

链接：https://www.jianshu.com/p/742882f61b44

想你看到的一样，这四个选项是从上而下build速度越来越快，但是越上面的越产生没有缺点的source map。

特别在中小型的项目中，eval-source-map是一个不错的选择，它build效率比较高，同时调试比较方便，同时我们可以写一个专门用于生产环境的webpack配置文件。后面会讲到具体的应用。

二、devServer.historyApiFallback

这个配置属性是用来应对返回404页面时定向到特定页面用的
对于单页面程序，浏览器的brower histroy可以设置成html5 history api或者hash，而设置为html5 api的，如果刷新浏览器会出现404 not found，原因是它通过这个路径（比如： /activities/2/ques/2）来访问后台，所以会出现404，而把historyApiFallback设置为true那么所有的路径都执行index.html。
作者：wpzero
链接：https://www.jianshu.com/p/b5248d441d9e