Question

我目前无法通过 Webpack 在本地主机上提供我的 index.js 文件。

Webpack 似乎编译没有问题，webpack serve 脚本在使用时会启动 webpack-dev-server 并提供我的 index.html 文件。但是，在我创建 webpack.config.js 文件后，问题是 webpack 脚本编译文件但不启动服务器。

package.json

{
  "name": "react-architecture",
  "version": "1.0.0",
  "description": "A tutorial on React Architecture",
  "main": "index.js",
  "scripts": {
    "serve": "webpack serve",
    "webpack": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Nick Norris",
  "license": "MIT",
  "devDependencies": {
    "webpack": "^5.46.0",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

webpack.config.js

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  watch: true,
  output: {
    path: path.resolve(__dirname, "public/js"),
    filename: "main.bundle.js",
  },
};

控制台输出：npm run serve

    $ npm run serve
    
    > react-architecture@1.0.0 serve C:\Users\18502\Documents\React Architecture
    > webpack serve
    
    [webpack-cli] No need to use the 'serve' command together with '{ watch: true }' configuration, it does not make sense.
    i ｢wds｣: Project is running at http://localhost:8080/
    i ｢wds｣: webpack output is served from /
    i ｢wds｣: Content not from webpack is served from C:\Users\18502\Documents\React Architecture
    i ｢wdm｣: asset main.bundle.js 368 KiB [emitted] (name: main)
    runtime modules 1010 bytes 5 modules
    modules by path ./node_modules/ 336 KiB
      modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
      modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
      modules by path ./node_modules/webpack/hot/ 1.58 KiB 3 modules
      modules by path ./node_modules/url/ 37.4 KiB 3 modules
      modules by path ./node_modules/querystring/*.js 4.51 KiB
        ./node_modules/querystring/index.js 127 bytes [built] [code generated]
        ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
        ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
    modules by path ./src/ 131 bytes
      ./src/index.js 66 bytes [built] [code generated]
      ./src/components/add/add.js 65 bytes [built] [code generated]
    webpack 5.46.0 compiled successfully in 339 ms
    i ｢wdm｣: Compiled successfully.

控制台输出：npm run webpack.

$ npm run webpack

> react-architecture@1.0.0 webpack C:\Users\18502\Documents\React Architecture
> webpack

asset main.bundle.js 4.24 KiB [compared for emit] (name: main) 
runtime modules 670 bytes 3 modules
cacheable modules 131 bytes
  ./src/index.js 66 bytes [built] [code generated]
  ./src/components/add/add.js 65 bytes [built] [code generated]
webpack 5.46.0 compiled successfully in 76 ms
assets by status 4.24 KiB [cached] 1 asset
cached modules 131 bytes (javascript) 670 bytes (runtime) [cached] 5 modules
webpack 5.46.0 compiled successfully in 10 ms

我尝试了一些方法，例如重命名文件并在文件资源管理器中移动它们以查看输出是否未指向正确的文件，但这不起作用。使用 webpack 脚本时，我对文件所做的任何事情都不会停止编译，即使我完全删除然后保存代码块也是如此。

This 问题似乎非常相似，我收到相同的“ERR_CONNECTION_REFUSED”消息，但本地服务器在使用 webpack serve 时运行良好，这让我觉得我只是遗漏了一些明显的东西在我的配置文件之一中。

Answer 1

需要添加devServer属性开发服务器 webpack-dev-server 可用于快速开发应用程序。请参阅开发指南以开始使用。

该页面描述了影响 webpack-dev-server（简称：dev-server）行为的选项。

提示与 webpack-dev-middleware 兼容的选项旁边有 ?。开发服务器对象

这组选项由 webpack-dev-server 选取，可用于以各种方式改变其行为。这是一个基本示例，它对项目根目录中的 dist/ 目录中的所有内容进行 gzip 压缩和提供服务：

webpack.config.js

var path = require('path');

module.exports = {
  //...
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};

服务器启动时，在解析模块列表前会有提示：

http://localhost:9000/ webpack 输出来自 /build/ 不是来自 webpack 的内容是从 /path/to/dist/ 提供的这将提供有关服务器所在位置及其服务内容的一些背景信息。

如果您通过 Node.js API 使用 dev-server，则 devServer 中的选项将被忽略。将选项作为第二个参数传递： new WebpackDevServer(compiler, {...})

Answer 2

你是对的，webpack 不会根据我们配置的构建启动服务器。这是您观看的 tutorial 的代码。

https://github.com/chawk/react_architecture_tutorial

正如 Ernesto 所说，您可以一次性完成所有这些工作。在教程中，我只是将它们分开以使其更容易。我使用了 2 个单独的命令提示符，一个用于构建，另一个用于运行开发服务器。

Webpack 编译但不提供文件

2 个答案: