这是我的场景:
我想在客户端(React)和服务器(Express)中都使用 ES6/7,加上 CSS 的 PostCSS,所以我需要 webpack + babel。
几个路由渲染页面托管 React 组件,一些(React 组件)微不足道,一些沉重。
我想使用 pug 作为视图引擎,将整个应用程序放在一个 SPA 中不是一种选择。
我的设置在开发模式下工作(在我的哈巴狗模板中,我将捆绑资产直接包含在带有脚本标签的构建目录中,问题出在生产模式下,捆绑的 js 文件的路径包含哈希并且是动态的。
这个问题的常见做法似乎是使用 HtmlWebpackPlugin,它可以将动态捆绑的 js 路径注入到您的模板中。问题是,我在 pug 中有很多视图模板,我无法在 webpack.config.js 中为每个模板添加一个条目。我正在探索的选项是让 webpack 生成一个仅包含资产的“部分”,包括像 and 之类的标签,然后在我的视图模板中包含这个“部分”。但是 HtmlWebpackPlugin 不适用于哈巴狗。经过一番挖掘,我发现了另一个人们使用的 webpack 插件——pug-loader。但似乎它只会将 pug 转换为纯 HTML。这意味着我不能将它作为 pug 文件包含在我的所有视图模板中。
这必须是一个已解决的问题,但我似乎无法找到解决方案。
先感谢您!