Question

我正在开发一个ssr React应用程序，其中我仅使用Webpack来创建客户端捆绑包。但是现在我必须添加诸如图像或自定义字体之类的静态文件，因此我还必须创建一个Webpack服务器文件来捆绑服务器代码。

所以这是我当前用于加载这些文件的设置。

来自webpack.server.js


module.exports = {
  ...
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
      {
        test: /\.(jpe?g|png|ttf|eot|otf|gif|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        use: 'url-loader'
      }
    ]
  }
};

来自webpack.client.js

module.exports = {
  ...
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader' },
      {
        test: /\.(jpe?g|png|ttf|eot|otf|gif|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        use: 'url-loader'
      }
    ]
  }
};

因此，基本上，我具有用于包含静态文件的相同配置，因此，我将在两个捆绑包client.js和server.js中具有相同的文件

实际上我在这里有两个问题。

在每个捆绑包中复制这些静态文件有多糟糕？
是否有任何设置可以告诉Webpack将公共静态文件导出到一个隔离文件，供client.js和server.js接收它们？

谢谢！

React SSR：客户端和服务器捆绑包上的静态文件

0 个答案: