1

我正在开发一个 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 中包含相同的文件

其实我这里有两个问题。

  1. 在每个包中复制这些静态文件有多糟糕？

  2. 是否有任何设置可以告诉 Webpack 将常见的静态文件导出到 client.js 和 server.js 可以使用它们的隔离文件？

谢谢！

4

0 回答 0