原稿：语雀 · 开发环境 · 原目录：Webpack › 官方指南学习 › 开发环境

本篇的代码使用 webpack doc：开发环境提供的 demo

本节的内容和配置只应该应用于开发环境中

使用 source map 

当 webpack 打包源代码时，可能会很难追踪到 error(错误) 和 warning(警告) 在源代码中的原始位置：如果将三个源文件（a.js, b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含一个错误，那么堆栈跟踪就会直接指向到 bundle.js。你可能需要准确地知道错误来自于哪个源文件，所以这种提示这通常不会提供太多帮助。

image.png

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

修改配置文件，添加一行

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
+  mode: "development",
  entry: {
    index: "./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"),
  },
};

此时出错的提示会定位到源文件中

image.png

自动编译工具

在每次编译代码时，手动运行 npm run build 会显得很麻烦。webpack 提供几种可选方式，帮助你在代码发生变化后自动编译代码

  • webpack’s Watch Mode：指示 webpack 观察依赖图中所有文件的更改。如果其中一个文件被更新，代码将被重新编译
  • webpack-dev-server：常用，提供一个简单的 web server，并且具有 live reloading(实时重新加载) 功能
  • webpack-dev-middleware：这是一个封装器(wrapper)，可以把 webpack 处理过的文件发送到一个 server。 webpack-dev-server 在内部使用了它。

下面仅使用 webpack-dev-server

首先下载安装：npm install –save-dev webpack-dev-server

修改配置，告知 server 从什么位置查找文件：以下配置告知 webpack-dev-server，将 dist 目录下的文件 serve 到 localhost:8080 下。（serve，将资源作为 server 的可访问文件）

   devtool: 'inline-source-map',
+  devServer: {
+       contentBase: './dist',
+   },
   plugins: [

webpack-dev-server 是 webpack 官方提供的一个小型 Express 服务器。使用它可以为 webpack 打包生成的资源文件提供 web 服务。webpack-dev-server 主要提供两个功能：

  2. 为静态文件提供web服务
  4. 自动刷新和热替换(HMR)

因此 webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中，然后将它们 serve 到 server 中

修改 package.json，添加一个可以直接运行 dev server 的 npm script：“start”: “webpack serve –open”

在命令行中运行 npm start，浏览器会自动加载页面。如果更改任何源文件并保存它们，web server 将在编译代码后自动重新加载

image.png