【Webpack】Dev Tools 开发工具

[swiftwind0405]

webpack-dev-server

DevServer 会启动一个 HTTP 服务器用于服务网页请求，同时会帮助启动 Webpack ，并接收 Webpack 发出的文件更变信号，通过 WebSocket 协议自动刷新网页做到实时预览。

首先需要安装 DevServer：

npm i webpack-dev-server -D

DevServer 会把 Webpack 构建出的文件保存在内存中。

接口代理(请求转发)

如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。dev-server 使用了非常强大的 http-proxy-middleware 包。常用于接口请求转发。具体参考https://www.webpackjs.com/configuration/dev-server/#devserver-proxy

devServer: {
    contentBase: "./dist",
    open: true,
    hot: true,
    hotOnly: true,
    proxy: {
      "/api": {
        target: "https://other-server.example.com",
        pathRewrite: {"^/api" : ""},
        secure: false,
        bypass: function(req, res, proxyOptions) {
          if (req.headers.accept.indexOf("html") !== -1) {
            console.log("Skipping proxy for browser request.");
            return "/index.html";
          }
        }
      }
    }
  },

webpack-dev-middleware

webpack-dev-middleware 是一个容器(wrapper)，它可以把 webpack 处理后的文件传递给一个服务器(server)。 webpack-dev-server 在内部使用了它，同时，它也可以作为一个单独的包来使用，以便进行更多自定义设置来实现更多的需求

// server.js
// 使用webpack-dev-middleware
// https://www.webpackjs.com/guides/development/#%E4%BD%BF%E7%94%A8-webpack-dev-middleware
const express = require("express");
const webpack = require("webpack");
const webpackDevMiddleware = require("webpack-dev-middleware");
const config = require("./webpack.config.js");
const complier = webpack(config);

const app = express();

app.use(
  webpackDevMiddleware(complier, {
    publicPath: config.output.publicPath
  })
);

app.listen(3000, () => {
  console.log("server is running");
});

解决单页面路由问题

当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
通过传入以下启用：

historyApiFallback: true;

复制代码通过传入一个对象，比如使用 rewrites 这个选项，此行为可进一步地控制：

historyApiFallback: {
  rewrites: [
    { from: /^\/$/, to: "/views/landing.html" },
    { from: /^\/subpage/, to: "/views/subpage.html" },
    { from: /./, to: "/views/404.html" }
  ];
}

Hot Module Replacement

模块热替换(Hot Module Replacement 或 HMR)是 webpack 提供的最有用的功能之一。它允许在运行时更新各种模块，而无需进行完全刷新。

webpack.config.js

const webpack = require('webpack');

devServer: {
  contentBase: './dist',
  open: true,
  hot: true,
  hotOnly: true
},
plugins: [
  ...
  new webpack.HotModuleReplacementPlugin()
],

如果已经通过 HotModuleReplacementPlugin 启用了模块热替换(Hot Module Replacement)，则它的接口将被暴露在 module.hot 属性下面。通常，用户先要检查这个接口是否可访问，然后再开始使用它。

index.js

// index.js
if (module.hot) {
  module.hot.accept("./library.js", function() {
    // 使用更新过的 library 模块执行某些操作...
  });
}

bundle 分析

借助一些官方推荐的可视化分析工具，可对打包后的模块进行分析以及优化

• webpack-chart: webpack 数据交互饼图
• webpack-visualizer: 可视化并分析你的 bundle，检查哪些模块占用空间，哪些可能是重复使用的
• webpack-bundle-analyzer: 一款分析 bundle 内容的插件及 CLI 工具，以便捷的、交互式、可缩放的树状图形式展现给用户

Preloading、Prefetching

prefetch：会等待核心代码加载完成后，页面带宽空闲后再去加载 prefectch 对应的文件;preload：和主文件一起去加载

• 可以使用谷歌浏览器 Coverage 工具查看代码覆盖率(ctrl+shift+p > show coverage)
• 使用异步引入 js 的方式可以提高 js 的使用率，所以 webpack 建议我们多使用异步引入的方式，这也是 splitChunks.chunks 的默认值是"async"的原因
• 使用魔法注释 /_ webpackPrefetch: true _/ ，这样在主要 js 加载完，带宽有空闲时，会自动下载需要引入的 js
• 使用魔法注释 /_ webpackPreload: true _/，区别是 webpackPrefetch 会等到主业务文件加载完，带宽有空闲时再去下载 js，而 preload 是和主业务文件一起加载的

Shimming

webpack 编译器(compiler)能够识别遵循 ES2015 模块语法、CommonJS 或 AMD 规范编写的模块。然而，一些第三方的库(library)可能会引用一些全局依赖（例如 jQuery 中的 $）。这些库也可能创建一些需要被导出的全局变量。这些“不符合规范的模块”就是 shimming 发挥作用的地方

• shimming 全局变量(第三方库)(ProvidePlugin 相当于一个垫片)

const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.ProvidePlugin({
      _: "lodash",
    }),
  ],
};

• 细粒度 shimming(this 指向 window)(需要安装 imports-loader 依赖)

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve("index.js"),
        use: "imports-loader?this=>window",
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      join: ["join"],
    }),
  ],
};

环境变量

在配置 Webpack 时，需要区分用于开发模式还是生产模式。比如我们只需要在生产模式时压缩 CSS；而在开发模式的时候，我们又希望生成 source map 便于调试，以及样式热更新。

详细可以看这篇文章，说的非常细致全面了：Webpack 设置环境变量的误区。

参考文档

• webpack5快发布了，你还没用过4吗