Node.js 网页包生成样式不显示

编辑：好的，我通过修改服务器文件修复了我的样式问题。我忘了更新静态资源路径。然而，我仍然有一个问题。我的javascript仍然无法正确启动

我在配置文件中为生产和开发环境定义了输出规则……但很明显，我在这一过程中犯了一个错误

好的，在我发布这篇文章之前，我只想说，我正在努力使用webpack。作为一名前端开发人员，我已经接受了6到8个月的培训，因此我已经对新语言和新技术感到非常兴奋，而最近在构建工具领域的这段旅程可能已经超出了我的承受能力

我要问一些问题，如果他们很愚蠢，请原谅我

我很难理解为什么目前我的生产和开发构建表现不一样。当我运行我的开发版本时，我所有的样式和js都正常工作，但是当我运行我的生产版本时，我的样式和js都不工作。dist文件夹中填充了所有预期的捆绑文件（所有我的缩小css和js都在那里），生成的index.html中的所有路径似乎都指向dist文件夹中的正确位置……我在下面发布了一个指向github repo的链接

寻找任何提示或线索。请随时询问更多信息，我真的不知道从哪里开始寻找（我还没有检查）的原因。在我看来，我在网上消费的关于webpack的课程材料非常差

---

由于

Webpack dev server

是在

8080

端口上启动的，因此Webpack dev build正在运行。所有

CSS

样式都内嵌在

标签中，您可以享受liveReload

由于

Express

config，生产生成无法工作，请将配置更改为提供：

var path = require('path')
const express = require('express')
const mockAPIResponse = require('./mockAPI.js')
const cors = require('cors');

const app = express();

app.use(express.static('src/client'));
app.use(cors());

// designates what port the app will listen to for incoming requests
app.listen(8081, function () {
    console.log('Example app server listening on port 8081!');
})

app.use(express.static('dist'));

app.get('/test', function (req, res) {
    res.send(mockAPIResponse);
})

添加了行

app.use（express.static（'dist'））。在output
dist
文件夹中发生了静态页面服务，以前您只是抛出了导入不正确的
index.html
文件

在应用更改之前，运行production build并通过单击打开浏览器中的
index.html
文件，然后重新考虑样式是否正常工作

简而言之：错误的
Express
设置，
dist
文件夹应该是公共的
网页包开发版本正在运行，因为
网页包开发服务器
是在
8080
端口上启动的。所有
CSS
样式都内嵌在
标签中，您可以享受liveReload

由于
Express
config，生产生成无法工作，请将配置更改为提供：

var path = require('path')
const express = require('express')
const mockAPIResponse = require('./mockAPI.js')
const cors = require('cors');

const app = express();

app.use(express.static('src/client'));
app.use(cors());

// designates what port the app will listen to for incoming requests
app.listen(8081, function () {
    console.log('Example app server listening on port 8081!');
})

app.use(express.static('dist'));

app.get('/test', function (req, res) {
    res.send(mockAPIResponse);
})


添加了行
app.use（express.static（'dist'））。在output
dist
文件夹中发生了静态页面服务，以前您只是抛出了导入不正确的
index.html
文件

在应用更改之前，运行production build并通过单击打开浏览器中的
index.html
文件，然后重新考虑样式是否正常工作

简而言之：错误的
Express
设置，
dist
文件夹应该是公共的
网页并不容易，我承认你必须学习很多东西才能解决很多问题：）

下面是你的网页的一个更优化的版本。我建议使用
webpack merge
插件，或者，正如我在小型应用程序中所描述的，一个用于开发和生产版本的文件，然后您将绕过与您必须记住完成开发和生产版本相关的错误

创建一个
webpack.config.js

首先需要对其进行修改package.js


“脚本”：{
“测试”：“echo\”错误：未指定测试\“&退出1”，
“开始”：“node src/server/index.js”，
“构建产品”：“webpack--config webpack.config.js--mode production”，
“构建开发”：“webpack开发服务器--config webpack.config.js--模式开发--打开”
}，
网页并不容易，我承认你必须学习很多东西才能解决很多问题：）

下面是你的网页的一个更优化的版本。我建议使用
webpack merge
插件，或者，正如我在小型应用程序中所描述的，一个用于开发和生产版本的文件，然后您将绕过与您必须记住完成开发和生产版本相关的错误

创建一个
webpack.config.js

首先需要对其进行修改package.js


“脚本”：{
“测试”：“echo\”错误：未指定测试\“&退出1”，
“开始”：“node src/server/index.js”，
“构建产品”：“webpack--config webpack.config.js--mode production”，
“构建开发”：“webpack开发服务器--config webpack.config.js--模式开发--打开”
}，
好的。我确定了我的问题到底是什么

正如前面在线程中提到的，我需要更新我的服务器以反映位于/dist文件夹中的静态资源

js的问题是我在加载器规则的正则表达式中使用了qoutes

解决了。谢谢大家的帮助。
好的。我确定了我的问题到底是什么

正如前面在线程中提到的，我需要更新我的服务器以反映位于/dist文件夹中的静态资源

js的问题是我在加载器规则的正则表达式中使用了qoutes

解决了。谢谢大家的帮助。
当您使用开发人员工具进行检查时，在“控制台和网络”选项卡中会看到什么？你也可以发布它们吗？是的，等一下……好了，编辑了我原来的帖子。对不起，我的无知，我以为我知道一两件关于web开发的事情，然后我开始使用webpack……“每个专家都曾经是初学者”你做得很好：）你的脚本问题可能会