在React Starter Kit中如何解決來自'./assets'的導入資產

Question

在server.js ，資產是這樣導入的

import assets from './assets';

如果我正確理解，則此路徑將映射到通過webpack配置在此處生成的build/public/assets ：

output: {
  path: path.resolve(__dirname, '../build/public/assets'),
  publicPath: '/assets/',
  sourcePrefix: '  ',
  pathinfo: isVerbose,
},

還是我誤會了？ 當我運行webpack我仍然遇到：

ERROR in ./src/server.js
Module not found: Error: Cannot resolve 'file' or 'directory' ./assets

基本上，這里的問題不是如何運行它，而是為什么該行可以import assets from './assets'; 即使src內沒有assets.js也可以解決React Starter Kit中的問題。

Answer 1

您需要先構建項目：

npm run build

這將創建其中包含assets.js文件的構建文件夾。

Answer 2

檢出/tools文件夾中的webpack.config.js文件。

它正在使用assets-webpack-plugin將資產捆綁到命名空間的client和vender模塊中。

運行npm run build ，webpack將生成的構建輸出到build/public/assets文件夾。 由於src/server.js將./assets引用為相對路徑（而不是固定路徑），因此一旦捆綁並從build/public目錄運行server.js ，它將可以使用。

該自述文件也很有幫助： 構建自動化工具 。