使用 source map （仅用于开发环境）
当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直接指向到 bundle.js。你可能需要准确地知道错误来自于哪个源文件，所以这种提示这通常不会提供太多帮助。
为了更容易地追踪 error 和 warning，JavaScript 提供了 source map 功能，可以将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。
//webpack.config.js 配置文件中加入
devtool: 'inline-source-map'
选择一个开发工具
-
webpack watch mode(webpack 观察模式)
- 指示 webpack "watch" 依赖图中所有文件的更改。如果其中一个文件被更新，代码将被重新编译，所以你不必再去手动运行整个构建。
-
//在package.json中
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"build": "webpack"
},然后运行 npm run watch ,当你改变一个文件时候，代码就会自动重新编译
- 缺点：需要手动刷新浏览器获取最新的结果
-
webpack-dev-server （用的最多）
- 提供了一个简单的 web server，并且具有 live reloading(实时重新加载) 功能
-
npm install --save-dev webpack-dev-server
//在webpack.config.js中加入
//配置告知webpack-dev-server，将dist目录下的文件 serve 到localhost:8080下。（译注：serve，将资源作为 server 的可访问文件）
//webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中，就好像它们是挂载在 server 根路径上的真实文件一样
devServer: {
contentBase: './dist'
},//在package.json中添加 npm scripts
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack-dev-server --open",
"build": "webpack"
},然后运行 npm start (不要加run)，这时候会自动在浏览器中打开页面，然后修改任何资源保存，web server 将在编译代码后自动重新加载（浏览器会自动更新，无需手动刷新）
webpack-dev-server 在编译之后不会写入到任何输出文件，即dist文件夹中是空的，没有任何文件！！！