Webpack + Babel 正在转译 Webpack 加载器，我该如何防止？

Question

I thought Webpack + Babel would only transpile application code, not code used for the Webpack build. However, it seems to be transpiling code from css-loader , mini-css-extract-plugin , etc, which is causing the following error:

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

If I add the following to exclude , this error is fixed:

  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',
        ],
      },
      ...

I thought I wouldn't need this because Babel shouldn't be transpiling packages used for Webpack's build process. I added node_modules to include because some packages use code that wouldn't work in older browsers.

Answer 1

The reason for that could be related to the include option on your rules, why dont you try to put the reference of node_modules in the resolve option, this way webpack looks through the declared entry and parses what it needs to resolve but excluding from transpiling the declared exclusions.

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

Try excluding all of node_modules , and only include the node_module resources you actually need to be transpiled. I'm betting this will make your problem go away.

Answer 3

For transpiling special files like, css or png or jpg or svg, etc from your project folders, certain loaders are required, but during transpiling it also picks up loader files so that format of your file (like css) can be matched and analysed for errors. This is then transpiled to give you the final build files.