Webpack +巴别塔正在转载Webpack加载器，我该怎么防止呢？

Question

我以为Webpack +巴别塔只会转译应用程序代码，而不是用于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

如果我将以下内容添加到exclude中，则可以修复此错误：

  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的引用放在resolve选项中，这样，webpack就可以查看声明的条目，并解析它需要解析的内容，但不会转译声明的排除。

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

Answer 2

尝试排除所有node_modules，只包含您实际需要转换的node_module资源。我敢打赌这会让你的问题消失。

Answer 3

要从项目文件夹中转换特殊文件，如css或png或jpg或svg等，需要特定的加载器，但在转换过程中，它还会拾取加载器文件，以便可以匹配文件格式(如css)并分析错误。然后将其转换为最终的构建文件。