Webpack 模块解析失败，引导 css

Question

我正在尝试使用 webpack 构建

npm 运行构建

但我收到以下错误

./node_modules/bootstrap/dist/css/bootstrap.min.css 1:0 中的错误 模块解析失败：意外字符“@”（1:0） 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。见https://webpack.js.org/concepts#loaders @charset "UTF-8";/*! | * 引导 v5.0.2 (https://getbootstrap.com/) | * 版权所有 2011-2021 The Bootstrap 作者

我的 webpack 配置如下所示

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./paginate.js",
  output: {
    path: path.resolve("./"),
    filename: "index.js",
    libraryTarget: "commonjs2",
  },
  module: {
    rules: [
      {
        test: /\.js|jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ],
  },
  externals: {
    react: "react",
  },
};

.babelrc 文件的样子

    {
  "presets": ["@babel/preset-env", ["@babel/preset-react", {
     "runtime": "automatic"
  }]]
}

我已经搜索过，但似乎找不到合适的加载器。

Answer 1

我不确定，只是猜测，很可能 bootstrap 正在尝试导入 CSS 或 scss，而您没有为它定义加载器。

尝试添加：

{
  test: /\.s?[ac]ss$/,
  use: ['style-loader', 'css-loader', 'sass-loader'],
  exclude: [/node_modules/],
},

根据您的 webpack 规则并使用 --save-dev 安装这些模块。

侧节点，这个正则表达式test: /\.js|jsx?$/,不正确，使用test: /\.jsx?$/,即可。这 ”？”表示 x 是可选的。