使用 Express 设置 Webpack 5 模板

大佬教程收集整理的这篇文章主要介绍了使用 Express 设置 Webpack 5 模板，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决使用 Express 设置 Webpack 5 模板？

我正在尝试使用 webpack 5 和 express 设置新的 React 应用程序模板，但是每当我运行构建命令时，我都会收到此错误：

✖「wds」：无效的配置对象。已使用与 API 架构不匹配的配置对象初始化 Webpack。

• configuration.module.rules[2] 应该是以下之一： ["..." |对象{编译器？，依赖？，描述数据？，强制？，排除？，生成器？，包括？，发行者？，发行者层？，层？，加载器？，mimetype？，oneOf？，选项？，解析 er?,realresource?,resolve?,resource?,resourceFragment?,resourcequery?,rules?,sIDeEffects?,test?,type?,use? },...] -> 规则。 细节：
  • 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;

解决方法

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

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

大佬总结

以上是大佬教程为你收集整理的使用 Express 设置 Webpack 5 模板全部内容，希望文章能够帮你解决使用 Express 设置 Webpack 5 模板所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。