使用Express设置Webpack 5模板

Question

我正试图使用webpack 5和express设置一个新的react应用程序模板，但每当我运行构建命令时，我都会收到以下错误：

✖ ｢wdś：无效的配置对象。已使用与API架构不匹配的配置对象初始化Webpack。

• configuration.module.rules[2]应该是其中之一：[quot；…quot；|object｛compiler？，dependency？，descriptionData？，enforce？，exclude？，generator？，include？，issuerLayer？，layer？，loader？，mimetype？，oneOf？，options？，pars呃？，realResource？，决定资源resourceFragment？，resourceQuery？，规则？，副作用？，测验类型使用？}，…]->一条规则。详细信息：
  • configuration.module.rules[2]。loader应该是非空字符串。->加载程序请求

关于如何修复它，有什么建议吗？

这里是我的模板：

webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const Dotenv = require("dotenv-webpack");

const fs = require("fs");
const appDirectory = fs.realpathSync(process.cwd());
const resolveApp = (relativePath) => path.resolve(appDirectory, relativePath);

module.exports = {
entry: resolveApp("src/app.jsx"),
output: {
path: resolveApp("dist"),
filename: "bundle.js",
publicPath: "",
},
mode: "development",
devtool: "eval",
module: {
rules: [{
test: /.(png|svg|jpg|jpeg|webp)$/,
use: ["file-loader"],
},
{
// look for .js or .jsx files
test: /.(js|jsx)$/,
// in the `src` directory
include: resolveApp("src"),
exclude: /(node_modules)/,
use: {
// use babel for transpiling JavaScript files
loader: "babel-loader",
options: {
presets: ["@babel/react"],
},
},
},
{
test: /.css$/,
loader: ["style-loader", "css-loader"],
},
{
test: /.s(a|c)ss$/,
use: [{
loader: "style-loader",
},
{
loader: "css-loader",
options: {
importLoaders: 2,
modules: { auto: true },
},
},
{
loader: "sass-loader",
},
],
},
],
},
devServer: {
contentBase: path.resolve("src"),
hot: true,
open: true,
port: 8000,
watchContentBase: true,
historyApiFallback: true,
proxy: {
"/api": {
target: "http://localhost:4000",
secure: false,
},
},
},
plugins: [
new Dotenv(),
new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
template: __dirname + "/src/index.html",
filename: "index.html",
inject: "body",
}),
],
resolve: {
// File extensions. Add others and needed (e.g. scss, json)
extensions: [".js", ".jsx"],
modules: ["node_modules"],
// Aliases help with shortening relative paths
alias: {
Components: path.resolve(resolveApp("src"), "components"),
Containers: path.resolve(resolveApp("src"), "containers"),
Utils: path.resolve(resolveApp("src"), "utils"),
},
},
performance: {
hints: false,
},
};

index.js
require("dotenv").config();
const express = require("express");
const bodyParser = require("body-parser");
const cookieParser = require("cookie-parser");
const cors = require("cors");

const app = express();
app.use(express.static(`${__dirname}/dist`));

app.use(express.json());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cookieParser());
app.use(cors());

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header(
"Access-Control-Allow-Headers",
"Origin, X-Requested-With, Content-Type, Accept"
);
next();
});

app.get("/*", (req, res) => res.sendFile(`${__dirname}/dist/index.html`));

app.listen(process.env.PORT || 4000, () =>
console.log(`Up and running on port ${process.env.PORT}`)
);

module.exports = app;

Answer 1

Webpack配置中第三个加载程序的配置无效。目前，它是：

{
test: /.css$/,
loader: ['style-loader', 'css-loader']
}

密钥loader必须是字符串(对于某些节点模块或绝对.js文件路径而言是相对的(。当您想要链接多个加载器时，应该使用use属性：

{
test: /.css$/,
use: ['style-loader', 'css-loader']
}