首页 文章

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

提问于
浏览 次
1

到目前为止，我一直在使用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)

但我明白了

错误：找不到模块'C：\ Users \ banjer \ projects \ foo \ build \ manifest.json'

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

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

关于这些各种资产插件的文档根本没有解释这个步骤，但是我再次认为它不太明显，因为webpack-dev-server ...或者我的堆栈中的某些东西我还没有完全掌握 .

javascript reactjs webpack webpack-dev-server isomorphic-javascript

1 回答

  • 0

    我使用了一个更简单的路由，并使用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,
...
}

    然后我以类似的方式从package脚本中读取，该脚本生成带有脚本标记的 .ejs 索引文件 .

    回复于

相关问题