sourceMap的配置，使用webpackDevServe提升开发效率

webpack入门（7）

sourceMap的配置

sourceMap是一个映射关系，当js报错的时候，它可以反映dist目录下报错的js文件对应的是src目录下的哪个js文件

这样配置之后就可以在调试中直接看到是源代码的什么地方报了错，而不是打包后的文件，

打包后会生成一个map文件，这个文件就是映射关系

注意：开启source-map之后，打包的速度会变慢

推荐配置：

development开发环境： 

            devtool: 'cheap-module-eval-source-map'  这种打包速度快

production正式环境：

            devtool: 'cheap-module-source-map'  这种错误提示比较全面

使用webpackDevServe提升开发效率

前面每次调试启动项目，都是先npm run bundle打包代码，然后手动打开dist目录下的index.html文件，这样的效率很低，所有有了这样的需求：我们每次修改了src目录里面的东西能自动打包并且在浏览器里自动更新

第一种方法：

    webpack --watch

    通过watch可以监听src里文件的变化，每次修改src里的文件会自动打包，但是需要手动刷新浏览器

第二种方法：

    webpack-dev-serve

webpack-dev-server不仅会自动监听src里的内容变化打包，还会自动刷新浏览器，相对于watch，webpack-dev-serve它开启了一个web服务器，这样就可以发送ajax请求了

webpack-dev-serve不会生成dist目录，而是将dist目录中的内容存入内存，以提高开发效率

第三种方法：

        不使用webpack-dev-server提供的服务器，自己搭建