Question

我现在正在编写单页应用并使用webpack。

我现在想开始使用Hot Module Replacement Plugin，因为它看起来很方便。

我遇到了一个问题。您似乎无法指定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，因为路径指向＆＃39; /static/assets/script/app.bundle.js&# 39;在index.html。

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

Answer 1

原来有一种方法。在文件名中添加bundle.js的路径：

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

Webpack Hot Module Reload指定捆绑

1 个答案: