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

如何解决为什么 webpack 不捆绑 react 组件的 .css 文件？

我有带有两个 react 组件的 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",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\',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 模板引擎将我的反应组件嵌入其中。

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

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

如何解决为什么 webpack 不捆绑 react 组件的 .css 文件？

相关推荐