提示本指南继续沿用 管理输出 指南中的代码示例。
如果已经阅读过之前的指南，那么应该对 webpack 的基础知识有了扎实的理解。在我们继续之前，先来看看如何设置开发环境，使我们的开发体验变得更轻松一些。
警告本指南中的工具 仅用于开发环境，请 不要 在生产环境中使用它们！
首先将 mode 设置为 'development'，并将 title 修改为 'Development'。
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
+ mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
plugins: [
new HtmlWebpackPlugin({
- title: 'Output Management',
+ title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};使用 source map当 webpack 打包源代码时，可能会很难追踪到错误和警告在源代码中的原始位置。例如，如果将三个源文件（a.js，b.js 和 c.js）打包到一个 bundle（bundle.js）中，而其中一个源文件包含错误，那么堆栈跟踪就会直接指向到 bundle.js，却无法准确知道错误来自于哪个源文件，所以这种提示通常无法提供太多帮助。
为了更容易地追踪错误与警告在源代码中的原始位置，JavaScript 提供了 source map 功能，可以帮助将编译后的代码映射回原始源代码。source map 会直接告诉开发者错误来源于哪一个源代码。
source map 有许多 可用选项，请务必仔细阅读它们，以便根据需要进行配置。
本指南将使用有助于解释说明示例意图的 inline-source-map 选项（不要在生产环境中使用它）：
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
+ devtool: 'inline-source-map',
plugins: [
new HtmlWebpackPlugin({
title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
};现在让我们来试试：在 print.js 文件中故意编写有问题的代码：
src/print.js
export default function printMe() {
- console.log('我被 print.js 调用了！');
+ cosnole.log('我被 print.js 调用了！');
}运行 npm run build，编译如下：
...
[webpack-cli] Compilation finished
asset index.bundle.js 1.38 MiB [emitted] (name: index)
asset print.bundle.js 6.25 KiB [emitted] (name: print)
asset index.html 272 bytes [emitted]
runtime modules 1.9 KiB 9 modules
cacheable modules 530 KiB
./src/index.js 406 bytes [built] [code generated]
./src/print.js 83 bytes [built] [code generated]
./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 706 ms现在，在浏览器中打开生成的 index.html 文件，点击按钮后控制台将会报错。错误信息应该如下：
Uncaught ReferenceError: cosnole is not defined
at HTMLButtonElement.printMe (print.js:2)可以看到，此错误包含有发生错误的文件（print.js）和行号（2）的引用。这将帮助确切知道所要解决问题的位置。
选择一个开发工具警告某些文本编辑器具有安全写入（safe write）功能，可能会干扰下面介绍的一些工具。参阅 调整文本编辑器 以解决这些问题。
每次编译代码都需要手动运行 npm run build 会显得很麻烦。
webpack 提供了几种可选方式帮助在代码发生变化后自动编译代码：
webpack 的 观察模式webpack-dev-serverwebpack-dev-middleware在多数场景中可能会使用 webpack-dev-server，但是不妨探讨一下以上的所有选项。
使用观察模式可以指示 webpack “观察”依赖图中所有文件的更改。如果其中一个文件被更新，代码将被自动重新编译，所以不必再去手动运行整个构建。
像下面这样添加一个用于启动 webpack 观察模式的 npm scripts：
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
+ "watch": "webpack --watch",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0"
},
"dependencies": {
"lodash": "^4.17.20"
}
}在命令行中运行 npm run watch，然后就会看到 webpack 是如何编译代码的。
编译完成后会发现它并没有退出命令行，这是因为该脚本当前还在观察你的文件。
现在，在 webpack 仍在观察文件的同时，移除之前故意加入的错误：
src/print.js
export default function printMe() {
- cosnole.log('我被 print.js 调用了！');
+ console.log('我被 print.js 调用了！');
}现在，保存文件并检查窗口，应该可以看到 webpack 已经自动地重新编译修改后的模块！
观察模式唯一的缺点是需要手动刷新浏览器才能看到修改后的实际效果。实现 webpack-dev-server 将能够自动刷新浏览器！
使用 webpack-dev-serverwebpack-dev-server 提供了一个能够实时重新加载的基本的 web server。安装依赖如下：
npm install --save-dev webpack-dev-server接下来修改配置文件，告诉 dev server 应从什么位置开始查找文件：
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
devtool: 'inline-source-map',
+ devServer: {
+ static: './dist',
+ },
plugins: [
new HtmlWebpackPlugin({
title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
+ optimization: {
+ runtimeChunk: 'single',
+ },
};以上配置告知 webpack-dev-server 将 dist 目录下的文件作为可访问资源部署在 localhost:8080。。
提示由于在这个示例中单个 HTML 页面有多个入口，所以添加了 optimization.runtimeChunk: 'single' 配置，否则可能会遇到 这个问题。参阅 代码分离 章节了解更多细节。
提示webpack-dev-server 会将在 output.path 中定义的目录中的 bundle 文件作为可访问资源部署在 server 中，即文件可以通过 http://[devServer.host]:[devServer.port]/[output.publicPath]/[output.filename] 进行访问。
警告webpack-dev-server 在编译之后不会写入任何输出文件，而是将 bundle 文件保留在内存中，然后将它们作为可访问资源部署在 server 中，就像是挂载在 server 根路径上的真实文件一样。如果页面希望在不同路径中找到 bundle 文件，可以修改 dev server 配置中的 devMiddleware.publicPath 选项。
添加一个可以直接运行 dev server 的 script：
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
+ "start": "webpack serve --open",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"lodash": "^4.17.20"
}
}现在，在命令行中运行 npm start，会看到浏览器自动加载页面。更改任何源文件并保存它们，web server 将在编译代码后自动重新加载。试试看！
webpack-dev-server 具有许多可配置的选项。参阅 配置文档 以了解更多配置选项。
提示现在 server 正在运行，也许你想试试 模块热替换！
使用 webpack-dev-middlewarewebpack-dev-middleware 是一个包装器，它可以把 webpack 处理过的文件发送到 server。这是 webpack-dev-server 内部的原理，但是它也可以作为一个单独的包使用，以便根据需求进行更多自定义设置。下面是一个 webpack-dev-middleware 配合 express server 的示例。
首先，安装 express 和 webpack-dev-middleware：
npm install --save-dev express webpack-dev-middleware现在调整 webpack 配置文件，以确保能够正确启用中间件：
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
print: './src/print.js',
},
devtool: 'inline-source-map',
devServer: {
static: './dist',
},
plugins: [
new HtmlWebpackPlugin({
title: 'Development',
}),
],
output: {
filename: '[name].bundle.js',
path: path.resolve(__dirname, 'dist'),
clean: true,
+ publicPath: '/',
},
};在 server 脚本使用 publicPath，以确保文件资源能够作为可访问资源正确部署在 http://localhost:3000 下，稍后我们会指定端口号。接下来是设置自定义 express server：
project
webpack-demo
|- package.json
|- package-lock.json
|- webpack.config.js
+ |- server.js
|- /dist
|- /src
|- index.js
|- print.js
|- /node_modulesserver.js
const express = require('express');
const webpack = require('webpack');
const webpackDevMiddleware = require('webpack-dev-middleware');
const app = express();
const config = require('./webpack.config.js');
const compiler = webpack(config);
// 告知 express 使用 webpack-dev-middleware，
// 以及将 webpack.config.js 配置文件作为基础配置。
app.use(
webpackDevMiddleware(compiler, {
publicPath: config.output.publicPath,
})
);
// 将文件 serve 到 port 3000。
app.listen(3000, function () {
console.log('Example app listening on port 3000!\n');
});现在添加 npm script 以便更方便地运行 server：
package.json
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --watch",
"start": "webpack serve --open",
+ "server": "node server.js",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"express": "^4.17.1",
"html-webpack-plugin": "^4.5.0",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-middleware": "^4.0.2",
"webpack-dev-server": "^3.11.0"
},
"dependencies": {
"lodash": "^4.17.20"
}
}在终端执行 npm run server，将会有类似如下信息输出：
Example app listening on port 3000!
...
[webpack-dev-middleware] asset index.bundle.js 1.38 MiB [emitted] (name: index)
asset print.bundle.js 6.25 KiB [emitted] (name: print)
asset index.html 274 bytes [emitted]
runtime modules 1.9 KiB 9 modules
cacheable modules 530 KiB
./src/index.js 406 bytes [built] [code generated]
./src/print.js 83 bytes [built] [code generated]
./node_modules/lodash/lodash.js 530 KiB [built] [code generated]
webpack 5.4.0 compiled successfully in 709 ms
[webpack-dev-middleware] Compiled successfully.
[webpack-dev-middleware] Compiling...
[webpack-dev-middleware] assets by status 1.38 MiB [cached] 2 assets
cached modules 530 KiB (javascript) 1.9 KiB (runtime) [cached] 12 modules
webpack 5.4.0 compiled successfully in 19 ms
[webpack-dev-middleware] Compiled successfully.打开浏览器，访问 http://localhost:3000，应该看到 webpack 应用程序已经运行！
提示参阅 模块热替换 指南了解更多关于模块热替换的运行机制。
调整文本编辑器使用自动编译代码时，可能会在保存文件时遇到一些问题。某些编辑器具有安全写入功能，会影响重新编译。
查看以下列表以在常见编辑器中禁用此功能：
Sublime Text 3：在用户偏好中添加 atomic_save: 'false'。JetBrains IDE（如 WebStorm）：在 Preferences > Appearance & Behavior > System Settings 中取消选中使用安全写入。Vim：在设置中增加 :set backupcopy=yes。总结现在已经学会了如何自动编译代码，并运行一个简单的开发环境 server。查看下一个指南学习 代码分离 吧！