javascript - Webpack Bundle 文件没有 CSS 样式和 UI 组件

Question

我使用 CRA 创建了我的元素(元素 1)。元素 1 使用一些 Ui 库，如“Reactstrap”和自定义 CSS 表。它自己很好。然后我使用 webpack 捆绑主要组件文件并尝试将其导出到其他元素(元素 2)。

我的元素的 webpack 看起来像这样:

module.exports = [
    {
        /*Client Side*/
        entry: './src/App.js',
        output:{
            path: path.resolve(__dirname, 'dist'),
            filename: "2FA.js",
            libraryTarget: 'umd',
            library: '2FA'
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader"
                    }
                },
                {
                    test: /\.html$/,
                    use: {
                        loader: "html-loader",
                        options: { minimize: true }
                    }
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader,"css-loader"]
                }
            ]
        },
        plugins: [
            new HtmlWebPackPlugin({
                template: "./public/index.html",
                filename:"./index.html"
            }),
            new MiniCssExtractPlugin({
                filename: "[name].css",
                chunkFilename:"[id].css"
            })
        ]
    } 
]

目标条目 App.js 是包含所有内容的主要 UI:

export default class TwoFA extends React.Component{
  render() {
    return (
      <div>
          /* All the staff */
      </div>
    );
  }
}

捆绑元素 1 在 dist 文件夹中生成 3 个文件:2FA.js(主要 js 文件)、index.html 和 main.css

然后在元素 2 中，我通过从 git 下载元素 1 导入了捆绑文件，并像这样使用组件:

import TwoFA from 'my-app/dist/2FA'

ReactDOM.render(<TwoFA />, document.getElementById('root'));

JavaScript 渲染良好。但是，它的 css 为零。没有 UI 库或没有自定义的 css 表。整个组件变成了没有任何 CSS 的普通 javascrip。

我检查了页面。 div 仍然有类名，但这些类名什么都不做。

我正在尝试弄清楚为什么以及如何修复它，感谢任何帮助

Answer 1

您需要在 WebPack 配置中按 output.library 中给出的名称导入捆绑库，即 2FA。