首页 文章

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

提问于
浏览 次
2

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

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

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

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

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

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

但是，当我使用Hot Module Replacement插件时，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' .

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

javascript webpack

1 回答

  • 0

    结果有一种方法 . 在文件名中添加bundle.js的路径：

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

相关问题