webpack躺坑--指南篇二

开发

1. 摘要
   在指南篇一中基本上简单的学习了如何从零到有的打包一份项目，但是，其中，还有许多开发时会遇到的功能，在此一记。

2. source map
   在按照指南篇一中使用webpack打包源码时，会发现如果源码报错，就追踪不到错误的位置了，这时就需要source map了，可以将编译后的代码映射到源代码上，在webpack.config.js中添加下述代码

    devtool: 'inline-source-map',
   

   这个选项有多重选择，当前的inline-source-map只适合开发环境时使用，上了生产为不影响性能需要去除。

3. 观察者模式
   当我们在开发时，修改了部分文件，总是需要重新构建，webpack帮我们解决了这个问题，当其中一个文件被更新时，代码将自动的重新编译，我们不用手动的运行整个构建。
   首先在package.json中添加npm script 脚本，

   "watch": "webpack --watch"
   

   再此运行npm run watch就可以看到命令行框中，当我们修改源码时，webpack会自动重新构建。

4. webpack-dev-server
   但是，程序猿们总是最懒的一群人，虽然代码重新构建了，但是，浏览器还需要我们手动刷新。于是，webpack又帮我们解决了这个问题，使用webpack-dev-server让浏览器可以实时的重新加载。
   首先安装webpack-dev-server，同时修改webpack.config.js，告诉webpack的开发服务器，应该在哪里找文件。webpack.config.js中添加如下代码。
   devServer: { contentBase: './dist' },
   再在package.json中添加一个脚本

   "start": "webpack-dev-server --open"
   

   运行npm run start即可