使用 webpack-dev-server 读取 webpack 资产 json

Question

到目前为止，我一直在使用 webpack 构建我的同构 Node/Express/React 应用程序，并通过在我的索引 html 文件中包含以下内容来毫无问题地提供我的 bundle.js：

<script src='/bundle.js'></script>

但是，为了部署到生产环境，我发现我需要一个适当的缓存清除机制，所以我找到了 webpack-manifest-plugin 这样我就可以将唯一的构建哈希添加到 bundle.js文件。

带有插件的 webpack 配置如下：

webpack.config.js

var ManifestPlugin = require('webpack-manifest-plugin');

var output = {
  path: path.join(__dirname, [ '/', config.get('buildDirectory') ].join('')),
  filename: "bundle.[hash].js"
};

将 manifest.json 文件输出到构建目录，如下所示：

{
  "main.js": "bundle.af0dc43f681171467c82.js"
}

我想我可以在 manifest.json 中阅读类似的内容：

var manifestPath = path.join(__dirname, [ '/', config.get('buildDirectory') ].join(''),'/manifest.json');
var manifest = require(manifestPath)

但我得到

Error: Cannot find module 'C:\Users\banjer\projects\foo\build\manifest.json'

这是因为 webpack-dev-server 将构建目录保存在内存中而不是磁盘上 (AFAIK)？阅读此 manifest.json 并将包文件名注入我的主索引 html 文件的最佳方法是什么，例如？:

<script src='/bundle.af0dc43f681171467c82.js'></script>

关于这些各种资产插件的文档根本没有解释这一步，但我又一次认为它不太明显，因为 webpack-dev-server ......或者我堆栈中的一些我不太了解的东西抓紧了。

Answer 1

我走了一条更简单的路线，使用 package.json 中的 version 作为缓存破坏者附加到 bundle.js。

webpack.config.js

var output = {
  path: path.join(__dirname, [ '/', config.get('buildDirectory') ].join('')),
  filename: 'bundle.' + JSON.stringify(require('./package.json').version) + '.js'
};

module.exports = {
  output: output,
...
}

然后我以类似的方式从生成我的 .ejs 索引文件的入口脚本中读取 package.json，该文件具有我的脚本标签。

使用 webpack-dev-server 读取 webpack 资产 json

Reading in webpack assets json with webpack-dev-server

javascript

reactjs

webpack

isomorphic-javascript

webpack-dev-server