reactjs - 为什么 webpack 不捆绑 react 组件的 .css 文件？

问题描述

我有带有两个反应组件的 react-ssr 项目（webpack，express）。第一个是处理大量 api 调用和东西的应用程序组件。这是工人组件，另一个只是列出一些东西。

当我的第一个组件导入 css 文件包并正确发送到客户端时。其他组件的导入 css 文件未到达客户端。

这是我的 webpack.config.js 首先。如您所见，我有应用程序、业务入口点。虽然应用程序入口点将所有内容与导入的 css 捆绑在一起。业务没有。

const path = require("path");

const config = {
  entry: {
    vendor: ["@babel/polyfill", "react"],
    app: "./src/components/index.js",
    business: "./src/components/OneBusinessComponent/index.js"
  },
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "[name].js",
    publicPath: '/public'
  },
  module: {
    rules: [
      {
        test: /\.js$|jsx/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"]
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: ['style-loader','css-loader'],
      }
    ]
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".wasm", ".mjs", "*"]
  }
};

module.exports = config;

这是我为这两个组件提供服务的路线

import express from "express";
import App from '../components/app';
import OneBusiness from '../components/OneBusinessComponent/oneBusiness'
import React from 'react';
import { renderToString } from 'react-dom/server';
import hbs from 'handlebars';
import { Provider } from 'react-redux'
import store from '../redux/store'
import con from '../config/mysqlConfig'
import mysql from 'mysql';
con.connect(function (err) {
    if (err) throw err;
    console.log("Connected")
})

const router = express.Router();
router.get("/", async (req, res) => {
    // <script src="/public/app.js" charset="utf-8"></script>
    // <script src="/public/vendor.js" charset="utf-8"></script>

    const theHtml = `
    <html>
     <head><title>Local Data</title></head>
    
    
    
    <body>
    
    <div id="reactele">{{{reactele}}}</div>
    <script src="app.js" charset="utf-8"></script>
    <script src="vendor.js" charset="utf-8"></script>
    
    </body>
    </html>
    `;
    const hbsTemplate = hbs.compile(theHtml)
    const reactComp = renderToString(<Provider store={store}>
        <App />
    </Provider>)
    const htmlToSend = hbsTemplate({ reactele: reactComp })


    res.send(htmlToSend);

});

router.get("/biz/:name/:city/:state/:id", async (req, res) => {

    console.log(req.params)
    
    let query = "SELECT * FROM final_businesses WHERE id= " + req.params.id.toString()
    console.log(query)
    con.query(query, (err, data) => {
        if (err) {

        }
        
        const theHtml = `
        <html>
            <head><title>My First SSR</title></head>
        <body>
        
        <div id="reactele">{{{reactele}}}</div>
        <script src="business.js" charset="utf-8"></script>
        <script src="vendor.js" charset="utf-8"></script>
        
        
        </body>
        </html>
        `;
        const hbsTemplate = hbs.compile(theHtml)
        console.log(hbsTemplate)
        const reactComp = renderToString(<OneBusiness params={data[0]}></OneBusiness>)
        console.log(reactComp)
        const htmlToSend = hbsTemplate({ reactele: reactComp })


        res.send(htmlToSend);
    })

});
export default router;

当我检查我的 business.js 捆绑文件时，它实际上捆绑了 css，但可能是因为路由它没有将 css 文件作为源添加到客户端。下面是捆绑的 business.js 的开始。

(()=>{"use strict";var e={3138:(e,t,n)=>{n.d(t,{Z:()=>a});
var r=n(3645),l=n.n(r)()((function(e){return e[1]}));l.push([e.id,'.info-label {\n    
color:white;\n    
font-family: "Segoe UI\', Tahoma, Geneva, Verdana, sans-serif";\n    
width: 100%;\n    
border:1px solid red;\n    \n}\n.
info-key {\n    
color:orange;\n    
font-family: "Segoe UI\', Tahoma, Geneva, Verdana, sans-serif";\n}\n.  
.nothing{\n    
background-color: blue;\n    
margin: 40px\n}\n.different {\n    
width: 500px;\n    
height: 500px;\n    
background-color: aqua;\n    \n}',""]);

这看起来像我正在完成捆绑。但我的第二条路线包含很多参数。当我检查谷歌浏览器源部分时。它显示了我的路径，如文件目录。我正在使用 hbs 模板引擎将我的反应组件嵌入其中。

我坚持了三天，任何帮助将不胜感激。

标签： reactjsexpresswebpackexpress-router

reactjs - 为什么 webpack 不捆绑 react 组件的 .css 文件？

问题描述

解决方案

推荐阅读