Webpack Hot Module Reload 指定不同的捆绑路径答案

【问题标题】：Webpack Hot Module Reload specify different path to bundleWebpack Hot Module Reload 指定不同的捆绑路径
【发布时间】：2016-10-01 10:02:05
【问题描述】：

我目前正在编写一个单页应用程序并使用 webpack。

我现在想开始使用热模块替换插件，因为它看起来很方便。

我遇到了一个问题。似乎您无法指定 bundle.js 文件的位置。

在我的 index.html 文件中，我使用以下内容加载 bundle.js 脚本

<script type="text/javascript" src="/static/assets/script/app.bundle.js"></script>

构建完成后，我可以将应用程序部署到服务器，一切都很好。

但是，当我使用热模块替换插件时，app.bundle.js 位于应用程序的根目录中。所以以下工作

<script type="text/javascript" src="/app.bundle.js"></script>

对于我的生产配置，没有 HMR，我有以下内容：

// production

entry: [
  './src/project/scripts/entry.js'
],

output: {
  path: path.join(__dirname, '/public/static/assets/script'),
  filename: 'app.bundle.js',
},

对于使用 HMR 的开发人员，我有以下内容

entry: [
  './src/project/scripts/entry.js',
  'webpack/hot/dev-server',
  'webpack-dev-server/client?http://localhost:8080/'
],

output: {
  path: path.join(__dirname, '/public/static/assets/script'),
  filename: 'app.bundle.js'
},

当然，当我运行 dev 时，它找不到 app.bundle.js，因为路径指向 index.html 中的“/static/assets/script/app.bundle.js”。

有没有办法为 HMR 插件指定 app.bundle.js 的位置？

【问题讨论】：

标签： javascript webpack

【解决方案1】：

原来是有办法的。在文件名中添加 bundle.js 的路径：

output: {
  path: __dirname + '/public',
  filename: 'static/assets/script/app.bundle.js'
}

【讨论】：