Webpack 开发服务器在启动前不构建应用程序

Question

我有以下开发服务器配置

devServer: {
    port: 3000,
    host: '0.0.0.0',
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000,
    },
    compress: true,
    inline: true,
    contentBase: BUILD_PATH,
    historyApiFallback: true,
}

哪里

BUILD_PATH = path.resolve(__dirname, '../build/webapp')

问题是 ../build/webapp 文件夹在开发服务器启动时是空的。结果应用程序加载正常（index.html，bundle.js）但无法加载应位于资产子文件夹中的任何字体或其他资源。

如果我运行只是 webpack - 所有内容都会出现在该文件夹中。在 webpack 之后，我可以启动开发服务器，一切都很好。

开发服务器日志：

    Project is running at http://0.0.0.0:3000/
    webpack output is served from /
    Content not from webpack is served from D:\Development\Projects\myproject\build\webapp
    404s will fallback to /index.html 
10% building modules 5/8 modules 3 active
     ...oject\webapp\node_modules\url\url.js(node:5560) 
 63% building modules 746/839 modules 93 active ...node_modules\lodash-es\_freeGlob
    al.js

有什么想法吗？

Answer 1

webpack devserver 模式构建和处理结果在内存中，不保存到磁盘。它以构建模式（而不是开发服务器模式）将它们保存到磁盘。

典型的解决方案是在监视模式下与 devserver 并行运行 webpack：

webpack -w

还有一些人使用 write-file-webpack-plugin for devserver:

Webpack 开发服务器在启动前不构建应用程序

Webpack dev server doesn't building app before start

webpack

webpack-dev-server