Webpack缓存复制的文件

Question

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

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

每当我对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'],
},
}

Answer 1

我认为您希望从模块规则中排除这些静态资源，就像您当前排除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']
}

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