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的一些做用。咱们还学习使用了模块的热替换。全部这些组合起来，能帮你更容易和更快地开发应用。