Webpack cache copied files

Question

I'm using webpack and webpack-dev-server to test changes to a React application but I have a large number of prebuilt resources (JS/CSS/etc).

To make these available to the rest of the application I am using copy-webpack-plugin and copying them into the build folder.

Any time I make a change to the React code, I see that it recompiles all of those resources, even though they are static, which takes almost 30 seconds to recompile. (Before adding them it took <2 seconds).

Is there any way to cache those resources or prevent them from needing to be recompiled after watched changes?

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

score 0 · Answer 1 · answered Jan 21 '22 at 19:15

I think you want to exclude these static resouces from the module rules like you currently have node_modules excluded:

{
  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']
}

If these are truly static, by excluding them you are preventing them from being bundled, but they will still be able to to be loaded cause of the loader rules you have established.

Webpack cache copied files

1 Answers1