在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 ，它将可以使用。

该自述文件也很有帮助： 构建自动化工具 。