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

文中使用的第二種，其它工具說明文檔中都有詳細介紹，感興趣的可以自行研究?