webpack （2） webpack-dev-server source map

 使用 source map

当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会简单地指向到 bundle.js。这并通常没有太多帮助，因为你可能需要准确地知道错误来自于哪个源文件。

为了更容易地追踪错误和警告，JavaScript 提供了 source map 功能，将编译后的代码映射回原始源代码。如果一个错误来自于 b.js，source map 就会明确的告诉你。

source map 有很多不同的选项可用，请务必仔细阅读它们，以便可以根据需要进行配置。

对于本指南，我们使用 inline-source-map 选项，这有助于解释说明我们的目的（仅解释说明，不要用于生产环境）：

  const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/print.js'},
+   devtool: 'inline-source-map',plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Development'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};

使用 webpack-dev-server

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。让我们设置以下：

npm install --save-dev webpack-dev-server

修改配置文件，告诉开发服务器(dev server)，在哪里查找文件：

webpack.config.js

  const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {entry: {app: './src/index.js',print: './src/print.js'},devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   },plugins: [new CleanWebpackPlugin(['dist']),new HtmlWebpackPlugin({title: 'Development'})],output: {filename: '[name].bundle.js',path: path.resolve(__dirname, 'dist')}};

以上配置告知 webpack-dev-server，在 localhost:8080 下建立服务，将 dist 目录下的文件，作为可访问文件。

让我们添加一个 script 脚本，可以直接运行开发服务器(dev server)：

package.json

  {"name": "development","version": "1.0.0","description": "","main": "webpack.config.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","watch": "webpack --watch",
+     "start": "webpack-dev-server --open","build": "webpack"},"keywords": [],"author": "","license": "ISC","devDependencies": {"clean-webpack-plugin": "^0.1.16","css-loader": "^0.28.4","csv-loader": "^2.1.1","file-loader": "^0.11.2","html-webpack-plugin": "^2.29.0","style-loader": "^0.18.2","webpack": "^3.0.0","xml-loader": "^1.2.1"}}

现在，我们可以在命令行中运行 npm start，就会看到浏览器自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。