如何在更改文件后重新编译webpack？

Question

我正在使用带有两个入口点的webpack:

entry: {
  js: './assets/index.js',
  css: './assets/sass/all.scss'
},

我想配置它,所以当我更改js或scss文件时,它会再次自动运行webpack.

---

我尝试使用webpack-dev-server命令:

webpack-dev-server --hot

看起来它正在重建,它会输出消息

webpack:bundle现在是VALID.

但是,如果我尝试刷新浏览器,我看不到我的更改.(在开发工具上禁用缓存,按下Ctrl + F5).重新启动节点也不起作用,就好像它在其他地方构建而不是在配置的输出文件上:

output: {
  path: path.join(__dirname, '/public'),
  filename: 'bundle.js'

},

Answer 1

如果您希望webpack监视更改,只需使用watch标志:

webpack --watch

使用此选项,webpack将监视更改并重新编译.

Answer 2

我不是 webpack 专家，但我发现 webpack-dev-server 不会写入磁盘。它通过用于提供文件的 Express 实例提供内存中的结果。

您可以通过在 html 文件中更改 localhost:8080/webpack-dev-server/bundle.js 的路径来测试这一点，如果您运行 webpack-dev 服务器，则更改应该会显示。

处理它的正确方法是使用 publicPath 属性更新您的 webpack.config.js ：

output: {
    path: path.join(__dirname, '/public'),
    filename: 'bundle.js',
    publicPath: "/public/"
}

在这种情况下，脚本标签应引用 src="public/bundle.js"。

更多信息