0

我正在使用 webpack 和 webpack-dev-server 来测试对 React 应用程序的更改，但我有大量的预构建资源（JS/CSS/等）。

为了使这些应用程序的其余部分可用，我使用了 copy-webpack-plugin 并将它们复制到构建文件夹中。

每当我对 React 代码进行更改时，我都会看到它重新编译所有这些资源，即使它们是静态的，重新编译需要将近 30 秒。（在添加它们之前需要 <2 秒）。

有没有办法缓存这些资源或防止它们在观察更改后需要重新编译？

webpack.config.js

{
  mode: 'development',
  entry: './src/index.tsx',
  plugins: [
    new HtmlWebpackPlugin(),
    new CopyPlugin([{
      from: "path/to/prebuilt/resources", to: "dist" },
    ]}),
  ],
  output: {
    filename: '[name].js',
    chunkFilename: '[name].bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        enforce: 'pre',
        exclude: /node_modules/,
        use: ['eslint-loader'],
      },
      {
        test: /\.(ts|tsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: ['css-loader', 'style-loader'],
      },
  },
  devServer: {
    historyApiFallback: true,
    contentBase: ['./build', './node_modules'],
  },
}
4

1 回答 1

0

我认为您想从模块规则中排除这些静态资源，就像您目前已node_modules排除的那样：

{
  test: /\.(ts|tsx|js|jsx)$/,
  enforce: 'pre',
  exclude: [/node_modules/, 'path/to/prebuilt/resources'],
  use: ['eslint-loader']
}

{
  test: /\.(ts|tsx)$/,
  exclude: [/node_modules/, 'path/to/prebuilt/resources'],
  use: ['babel-loader']
}

{
  test: /\.css$/,
  exclude: [/node_modules/, 'path/to/prebuilt/resources'],
  use: ['css-loader', 'style-loader']
}

如果这些确实是静态的，则通过排除它们可以防止它们被捆绑，但由于您建立的加载器规则，它们仍然可以被加载。

于 2022-01-21T19:15:24.330 回答