webpack 4 笔记四 source map 与开发工具 webpack-dev-server

根据前文，完成了对输出文件的管理。
现在，根据说明文档，建立一个开发环境，使开发变得更容易一些。主要是两个方面，一是使用 source map 来追踪错误和警告信息的位置，二是使用 webpack-dev-server 自动编译代码。

首先，将生产模式设为开发模式
在 webpack.config.js 配置

  const path = require('path');
  const HtmlWebpackPlugin = require('html-webpack-plugin');
  const CleanWebpackPlugin = require('clean-webpack-plugin');

  module.exports = {
+   mode: 'development',
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
...

使用 source map 追踪错误和警告信息

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

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

在 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',
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        title: 'Development'
      })
    ],
    output: {
      filename: '[name].bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  };

这样，当我们在 print.js 文件中生成一个错误时：
src/print.js

  export default function printMe() {
-   console.log('I get called from print.js!');
+   cosnole.error('I get called from print.js!');
  }

通过编译后，打开控制台， source map 会将跟踪到错误地址显示如下：

知道问题在哪后，就可以直接着手解决拉，对于开发十分有帮助！

使用 webpack-dev-server 自动编译代码

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)，这样我们码好代码后，只需轻轻的保存下，从此无需再按 F5 刷新页面啦?，超有用！
一、安装插件

cnpm install --save-dev webpack-dev-server

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

...
  module.exports = {
    entry: {
      app: './src/index.js',
      print: './src/print.js'
    },
    devtool: 'inline-source-map',
+   devServer: {
+     contentBase: './dist'
+   },
    plugins: [
...

三、package.json 添加 script 脚本，运行开发服务器(dev server)

...
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "watch": "webpack --watch",
+     "start": "webpack-dev-server --open",
      "build": "webpack"
    },
...

四、运行 npm start ，浏览器就会自动加载页面。如果现在修改和保存任意源文件，web 服务器就会自动重新加载编译后的代码。

完美！

最后
关于自动编译代码，webpack 中有几个不同的选项

1. webpack’s Watch Mode
2. webpack-dev-server
3. webpack-dev-middleware

文中使用的第二种，其它工具说明文档中都有详细介绍，感兴趣的可以自行研究?