如何在更改文件后重新编译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现在是有效的。

但是，如果我尝试刷新浏览器，则无法看到我的更改。 （在开发工具上禁用缓存，按下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”。

More info

Answer 3

webpack通常会自动重建。就我而言，它工作正常，但突然停止了，解决方法是根据文档https://webpack.js.org/configuration/watch/#not-enough-watchers

将值增加到文件/proc/sys/fs/inotify/max_user_watches中

运行以下命令：

echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p

Answer 4

你可以像下面的脚本一样手动编译你的 mix 文件

<script src="{{ mix('js/app.js') }}"></script>