Webpack неожиданный токен на HTML-теги при включении пакета node_modules в сборку

Question

У меня есть некоторые общие компоненты из другого приложения в каталоге shared, который был добавлен в мое приложение как пакет в package.json.

Я понял, что мне нужно включитьэтот каталог в моей конфигурации веб-пакета, поскольку компоненты используют ES6 и должны быть перенесены на babel

. После некоторого поиска в Google я добавил следующее к своему webpack config

module: {
    rules: [
      {
        test: /\.js$|\.jsx$/,
        exclude: /node_modules\/(?!shared\/).*/, // added this line
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
            ],
            plugins: [
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-proposal-export-default-from',
            ],
          },
        },
      },
    ],
  },

Это должно бытьявное указание на исключение каталога node_modules за исключением для каталога shared.

Теперь моя проблема заключается в том, что webpack выдает unexpected token ошибки для HTML-тегов, таких как <span> и <input>в каталоге shared

Кто-нибудь знает, почему это происходит и как я могу это исправить?

Вот мойКонфигурация веб-пакета:

const path = require('path');

const HtmlWebPackPlugin = require('html-webpack-plugin');

const htmlPlugin = new HtmlWebPackPlugin({
  template: './source/index.html',
  filename: 'index.html',
});

const buildPlugin = new webpack.DefinePlugin({
  BUILD_INFO: JSON.stringify('BUILD-000'),
});

module.exports = {
  entry: './source/client.js',
  output: {
    path: path.resolve('build'),
    filename: 'bundled.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.js$|\.jsx$/,
        exclude: /node_modules\/(?!shared\/).*/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              '@babel/preset-env',
              '@babel/preset-react',
            ],
            plugins: [
              '@babel/plugin-proposal-class-properties',
              '@babel/plugin-proposal-export-default-from',
            ],
          },
        },
      },
    ],
  },
  resolve: {
    alias: {
      api: path.resolve(__dirname, './source/js/api'),
      config: path.resolve(__dirname, './source/js/config'),
      components: path.resolve(__dirname, './source/js/components'),
      init: path.resolve(__dirname, './source/js/init'),
      context: path.resolve(__dirname, './source/js/context'),
      views: path.resolve(__dirname, './source/js/views'),
      utilities: path.resolve(__dirname, './source/js/utilities'),
      helpers: path.resolve(__dirname, './source/js/helpers'),
      store: path.resolve(__dirname, './source/js/store'),
      styles: path.resolve(__dirname, './source/styles'),
    },
    extensions: ['.js', '.jsx'],
  },
  plugins: [htmlPlugin, buildPlugin],
  watchOptions: {
    aggregateTimeout: 300,
    poll: 1000,
  },
  devServer: {
    disableHostCheck: true,
    historyApiFallback: true,
    port: 80,
    hot: false,
    host: '0.0.0.0',
    stats: {
      assets: true,
      children: false,
      chunks: false,
      hash: false,
      modules: false,
      publicPath: false,
      timings: true,
      version: false,
      warnings: true,
      colors: true,
    },
  },
};