Webpack 4教程 - 第六部分 加強開發時體驗

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。
原文出處：https://wanago.io/2018/08/06/webpack-4-course-part-six-increasing-development-experience

 

今天咱們將介紹mode屬性的development值。它會自動爲你配置Webpack以簡化開發過程。除此以外，咱們還會介紹webpack-dev-server——包括模塊熱替換。開始吧！

開發體驗優化的其中一步是讓Webpack運行在watch模式下。試試webpack --watch。如今每當你對源碼作出修改，Webpack會從新編譯你的工程而後輸出。webpack-dev-server則作得更多。它不是把輸出文件寫到文件夾下，而是直接把它們寫入內存。在構建完以後，輸出可做爲本地服務器資源被訪問。

運行 webpack-dev-server

首先是安裝它。

npm install webpack-dev-server

 

而後是在你的package.json文件中加入它：

"scripts": {
  "build": "webpack",
  "start": "webpack-dev-server"
}
···

如今就可使用`npm start`來啓動它。你會看到下面的提示信息：
```bash
｢wds｣: Project is running at http://localhost:8080/

剩下的事情只是在瀏覽器中打開http://localhost:8080/了。

模塊熱替換

爲進一步優化你的開發體驗，可使用模塊熱替換，你甚至跳過刷頁面的需求。好比，當你對某些樣式作了修改，沒必要刷新整個頁面就能夠看到效果。

在第四節教程咱們曾使用了MiniCssExtractPlugin。請注意，在寫文本時，對MiniCssExtractPlugin的熱模塊更新支持尚未實現。更多信息請可查看Github上的此issue。在當前開發環境，你可能須要使用的是style-loader。

當你運行webpack-dev-server時，它使用與正常構建時相同的配置文件。你能夠在webpack.config.js中加入一個叫devServer的參數來進行額外的配置。咱們須要它來開啓模塊熱替換。　　

// webpack.config.js
const webpack = require('webpack');

module.exports = {
  devServer: {
    hot: true
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin()
  ]
};

注意，當開啓 -hot 標誌以運行 webpack-dev-server 時也會在plugins里加入HotModuleReplacementPlugin。若是你添加了兩次，可能會出現問題。

這對於咱們的CSS調試是頗有吸引力的。但當修改是JavaScript時，還需點額外步驟。

// index.js
import { divide } from "./divide";

console.log(`6 / 2 = ${divide(6,2)}`);

if(module.hot) {
  module.hot.accept();
}
// divide.js
export function divide(a, b) {
  return a / b;
}

運行module.hot.accept()會讓模塊可熱替換。這一樣適用於它引入的全部其餘模塊。上面的代碼意味着，index.js中的accept()讓divide模塊可以被熱替換。

運行module.hot.accept()函數時能夠傳參，若是你感興趣，請查看文檔。

當使用HotModuleReplacementPlugin插件時，若是輸出文件名中使用了chunkhash字段，就可能會出現一些問題。這種狀況下，只在開發環境下使用HotModuleReplacementPlugin是個好主意（並且避免使用chunckhash）。

// webpack.config.js
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const isDevServer = require.main.filename.includes('webpack-dev-server');
const plugins = [
  new HtmlWebpackPlugin({ template: './src/index.html' }),
];
if(isDevServer) {
  plugins.push(new webpack.HotModuleReplacementPlugin());
}

module.exports = {
  output: {
    filename: isDevServer ? '[name].bundle.js' : '[name].[chunkhash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins,
    devServer: {
      hot: true
  }
}

webpack-serve

譯者注：因爲webpack-serve其實已經再也不維護了。推薦仍然使用上面所說的webpack-dev-sever。

mode: "development"

在以前的課程，咱們介紹了mode屬性的production值。如今該輪到development了。讓咱們看看它爲咱們作了咱們。

DefinePlugin

如以前所說，這個插件容許你建立編譯時的全局常量。

由於這個插件也在mode: produnction中使用，更多信息可查看教程的第五部分。

此次它的值爲process.env.NODE_ENV: JSON。stringify("development")：

module.exports = {
  mode: "development",
  // 使用 mode: "development" 會添加如下配置：
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("development")
    }),
  ]
}

NamedModulesPlugin

這是在使用mode: "development"時默認加入的另外一個插件。它在使用模塊熱替換時頗有用。有了NamedModulesPlugin，咱們可以看到被替換模塊的相對路徑。　　

[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] Updated modules:
[HMR]  - ./src/style.css
[HMR] App is up to date

不然咱們只會看到一個id，而不是像./src/style.css這樣的路徑。

NamedChunksPlugin

它的左右和NamedModulesPlugin相似。有了它，不只模塊能看到名字，chunk也能。當應用在瀏覽器中運行起來是，你能夠在window.webpackJsonp屬性中查看它們。

使用NamedModulesPlugin和NamedChunksPlugin的一個額外好處是,當添加和刪除依賴時，打包再也不須要使用模塊的順序id。由於這些id和名字會在最終的輸出產物中使用，修改它們會致使文件哈希值的變化，即便這些文件使用的模塊自己並無改變。使用以上兩個插件會幫助你處理瀏覽器的緩存問題。讓咱們來比較一下代碼：

沒使用NamedModulesPlugin和NamedChunksPlugin：

// 輸出產物
(window["webpackJsonp"] = window["webpackJsonp"] || []).push([[2],{
  /***/ 6:
  (...) // divide.js module output code

  /***/ 7:
  (...) // substract.js module output code
]);

使用了NamedModulesPlugin和NamedChunksPlugin：

(window["webpackJsonp"] = window["webpackJsonp"] || []).push([["utilities~main"],{
  /***/ "./src/utilities/divide.js":
  (...) // divide.js module output code

  /***/ "./src/utilities/substract.js":
  (...) // substract.js module output code
]);

Devtool

除了添加插件，設置mode: "development"還作了一件事，即經過設置devtool的值爲eval開啓了源碼映射（Source Map）。　　

// webpack.config.js
module.exports = {
  mode: "development",
  // 使用 mode: "development:" 添加了如下配置
  devtool: "eval"
}

轉譯、壓縮和打包你的代碼能讓你的用戶有更好的體驗。通過這些步驟以後，代碼變得更精簡和高效。而調試這樣的代碼則變得很是困難。所以，引入了源碼映射（Source Map）。它們把輸出後的的代碼與源碼對應起來。有了它，相對於瀏覽器真正運行的打包後的輸出，你能看到其對應的源碼，從而更加容易地使用調試工具和設置斷點。咱們會在接下來的課程中對源碼映射作進一步介紹，但若是你須要如今就定製它，可查看它的文檔。　　

總結

Webpack是開發現代Web應用的強大工具。它不只讓你優化生產環境的代碼，並且還能夠並定製，用以加強開發時的體驗。此次咱們介紹瞭如何運行開發時服務器，以及把mode屬性設成development的一些做用。咱們還學習使用了模塊的熱替換。全部這些組合起來，能幫你更容易和更快地開發應用。