Question

我正在使用Express＆Webpack 4建立一个新的React项目。

这是我的项目结构：

|--main/
|    |--dist/
|    |    |--static/
|    |    |    |--bundle.js
|    |    |--index.html
|    |--server/
|    |    |--index.js (ExpressJS entry point)
|    |--src/
|    |    |--index.js
|    |    |--index.html
|    |    |--components
|    |--webpack.config.js

webpack.config.js中的exports包括：

  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'static/bundle.js'
  },

ExpressJS（server / index.js）JS中的static设置是：

const DIST_DIR = path.join(__dirname, '..', 'dist');
app.use(express.static(path.join(DIST_DIR, 'static')));

运行服务器时，已从根目录（localhost：8888 /）从/static/bundle.js正确接收到路径dist上的文件。根页面工作正常。

但是在非根页面上（localhost：8888 / category /：category）时，它将在/category/static/bundle.js上不存在的路径dist上查找文件。

我尝试将ExpressJS中的静态设置更改为：

const DIST_DIR = path.join(__dirname, '..', 'dist');
app.use('/static', express.static(path.join(DIST_DIR, 'static')));

但是没有用。

如何解决非根页面的问题？我如何告诉express寻找静态文件的绝对路径（/static/bundle.js），而不是相对路径。另外，我的webpack配置是否正确？

Express + Webpack：静态文件路径问题

0 个答案: