Webpack 编译但不提供文件

Question

我目前无法通过 Webpack 在 localhost 上获取我的 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

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

https://github.com/chawk/react_architecture_tutorial

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

Answer 2

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

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

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

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

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, {...})