Webpack 编译但不提供文件
Webpack compiling but not serving files
我目前无法通过 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:\Users502\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:\Users502\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:\Users502\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
时本地服务器运行正常,这让我觉得我只是在我的一个配置文件中遗漏了一些明显的东西。
您需要添加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 使用开发服务器,devServer 中的选项将被忽略。将选项作为第二个参数传递:new WebpackDevServer(compiler, {...})
你是对的,webpack 不会根据我们配置的构建启动服务器。这是您观看的 tutorial 的代码。
https://github.com/chawk/react_architecture_tutorial
正如埃内斯托所说,您可以一次性完成所有这些工作。在本教程中,我只是将它们分开以使其更容易。我使用了 2 个单独的命令提示符,一个用于构建,一个用于 运行 开发服务器。
我目前无法通过 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:\Users502\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:\Users502\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:\Users502\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
时本地服务器运行正常,这让我觉得我只是在我的一个配置文件中遗漏了一些明显的东西。
您需要添加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 使用开发服务器,devServer 中的选项将被忽略。将选项作为第二个参数传递:new WebpackDevServer(compiler, {...})
你是对的,webpack 不会根据我们配置的构建启动服务器。这是您观看的 tutorial 的代码。
https://github.com/chawk/react_architecture_tutorial
正如埃内斯托所说,您可以一次性完成所有这些工作。在本教程中,我只是将它们分开以使其更容易。我使用了 2 个单独的命令提示符,一个用于构建,一个用于 运行 开发服务器。