javascript - Webpack + Babel 正在转译 Webpack 加载器，我该如何防止这种情况发生？

Question

我认为 Webpack + Babel 只会转译应用程序代码，而不是用于 Webpack 构建的代码。但是，它似乎正在从 css-loader、mini-css-extract-plugin 等转译代码，这导致了以下错误:

ERROR in ./styles/main.scss
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
TypeError: __webpack_require__(...) is not a function

如果我将以下内容添加到排除，则此错误将得到修复:

  module: {
    rules: [
      {
        test: /\.(j|t)sx?$/,
        include: [APP_ROOT, path.resolve('./node_modules')],
        exclude: [
          path.resolve('./node_modules/mini-css-extract-plugin'),
          path.resolve('./node_modules/css-loader'),
        ],
        use: [
          'babel-loader',
        ],
      },
      ...

我认为我不需要这个，因为 Babel 不应该转译用于 Webpack 构建过程的包。我将 node_modules 添加到 include 中，因为某些包使用的代码在旧版浏览器中无法工作。

Answer 1

原因可能与规则中的 include 选项有关，为什么不尝试将 node_modules 的引用放在解析选项中，这样 webpack 会遍历声明的条目并解析它需要解析但排除的内容免于转译声明的排除。

entry: SRC_DIR + '/main.js',
resolve: {
    extensions: ['.js'],
    modules: [SRC_DIR, 'node_modules']
},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: ['eslint-loader']
        }
    ]
}