webpack + React 单页实践#2：配置 webpack-dev-server #9

S-T-D · 2021-02-27T17:58:58Z

webpack-dev-server
代码地址

上一篇完成了对项目的初始化，这篇主要完成开发环境的配置。

主要内容：

webpack-dev-server

官网介绍了 3 种开发环境下使用的工具：

webpack's Watch Mode
webpack-dev-server
webpack-dev-middleware

我们这里选择 webpack-dev-server 作为本地开发工具。

1. 安装

yarn add webpack-dev-server -D

2. 新增命令

    "scripts": {
        "build": "webpack",
+       "dev": "webpack serve"
    }

3. 配置 devServer

// webpack.config.js
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
 +  devServer: {
 +     contentBase: './dist'
 +  }
};

然后前往终端运行 yarn dev

使用浏览器打开 http://localhost:8080 会看到页面正常的运行，效果如下，修改 src/index.js，保存之后浏览器会自动刷新以加载最新的代码。

4. 解释
下面我们看看上面截图中前 3 句输出的具体含义。

Project is running at http://localhost:8080/

这句话的意思是在开发阶段通过 http://localhost:8080 即可访问到项目。

webpack output is served from /

这句话的字面意思：webpack 的输出地址是 /。
结合第一句输出和 webpack.config.js 中的 output 配置来看，实际可以理解为：webpack 将打包文件输出到项目的 dist 目录下，并且通过 http://localhost:8080/bundle.js 即可访问，注意 bundle.js 并没有实际输出到磁盘，只是存在于内存中，所以在目录 dist 下其实是看不到该文件的。

Content not from webpack is served from ./dist

在 webpack.config.js 中的 contentBase 指定的 ./dist 其实就是这句输出中的 ./dist。(contentBase：用于指定静态文件的托管目录。)
那么这句输出的字面意思就是：托管 dist 目录，让浏览器可以访问。目前 dist 目录下只有一个 index.html，内容如下。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

为什么打开 http://localhost:8080 可以访问到 index.html 并且可以加载 bundle.js 并执行呢？
因为 http://localhost:8080 实际指向的是 dist 目录，也就是 contentBase 所指定的目录，所以我们能直接访问到 index.html。bundle.js 我们指定的是相对路径，所以实际访问的路径是 http://localhost:8080/bundle.js，也就是第二句输出中所解释的，所以能够加载并执行。

所以这句输出的实际含义要就是上面所述。

5. contentBase 的默认值。
默认值：项目根目录。
删除 webpack.config.js 中的 contentBase 配置，再重新运行 yarn dev，再次打开 http://localhost:8080，效果如下。

可以看到，删除配置后，http://localhost:8080 不再默认打开 index.html，而是打开了项目根目录，也就是 contentBase 的默认值。

6. publicPath
除了 contentBase，还可以设置 publicPath，用于确定应该从哪里提供 bundle 文件。
测试一下，将 publicPath 设置为 /dist/

// webpack.config.js
module.exports = {
    ...
    devServer: {
        contentBase: './dist',
+       publicPath: '/dist/',
    }
};

再次打开 http://localhost:8080，控制台会报 404 错误。

因为现在 bundle.js 不存在于根目录下，而是在 dist 目录下，正确路径应该是 http://localhost:8080/dist/bundle.js。

7. 其他配置。

port

指定项目运行的端口号，如果 8080 被占用，可以通过此配置其他端口号。

host

如果希望同一个网络环境下的其他设备可以访问项目，可以将此设置为 '0.0.0.0'。

useLocalIp

设置为 true，表示使用本地 ip 替代 localhost。
注意：设置为 true 的同时，必须同时设置 host。

open

如果设置为 true，运行 yarn dev 后，会自动打开浏览器。

其他有用的配置后面用到会再做介绍，完整配置参见文档。

代码地址

webpack-react-spa-template-project

The text was updated successfully, but these errors were encountered:

S-T-D changed the title ~~2. 使用 webpack 搭建 react 单页应用#2：配置 webpack-dev-server~~ 2. webpack + React 单页实践#2：配置 webpack-dev-server Mar 10, 2021

S-T-D changed the title ~~2. webpack + React 单页实践#2：配置 webpack-dev-server~~ webpack + React 单页实践#2：配置 webpack-dev-server May 10, 2021

S-T-D added Webpack 工程化 labels May 11, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

webpack + React 单页实践#2：配置 webpack-dev-server #9

webpack + React 单页实践#2：配置 webpack-dev-server #9

S-T-D commented Feb 27, 2021 •

edited

Loading

webpack + React 单页实践#2：配置 webpack-dev-server #9

webpack + React 单页实践#2：配置 webpack-dev-server #9

Comments

S-T-D commented Feb 27, 2021 • edited Loading

webpack-dev-server

代码地址

S-T-D commented Feb 27, 2021 •

edited

Loading