node.js 更改文件后如何重新编译webpack?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/34499390/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-09-02 19:42:19  来源:igfitidea点击:

How to recompile webpack after changing files?

node.jswebpack

提问by BrunoLM

I'm using webpack with two entry points:

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

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

I want to configure it so when I change a jsor scssfile it automatically run webpack again.

我想配置它,以便当我更改一个jsscss文件时,它会自动再次运行 webpack。



I tried to use webpack-dev-serverwith the command:

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

webpack-dev-server --hot

It looks like it is building again, it outputs the message

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

webpack: bundle is now VALID.

webpack:包现在有效。

However if I try to refresh the browser I can't see my changes. (Cache disabled on dev tools and Ctrl+F5 pressed). Restarting node also doesn't work, it is as if it had build somewhere else and not on the configured output file:

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

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

},

},

回答by Anonymous

If you want webpack to watch for changes simply use the watchflag:

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

webpack --watch

With this option webpack will watch for changes and re-compile.

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

回答by Peter Forgacs

I'm not a webpack expert but what i found is that webpack-dev-server doesn't write to disk. It serves the result from memory trough the Express instance it uses to serve the files.

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

You can test this by changing the path to localhost:8080/webpack-dev-server/bundle.js in your html file and if you run webpack-dev server the changes should show up.

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

The proper way to handle it is to update your webpack.config.js with a publicPath property:

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

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

In this case the script tag should refer to src="public/bundle.js".

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

More info

更多信息

回答by Jeff Pal

webpacknormally rebuild automatically. In my case it was working fine but suddenly it stopped and the solution was to increase the value into file /proc/sys/fs/inotify/max_user_watchesaccording to the documentation: https://webpack.js.org/configuration/watch/#not-enough-watchers

webpack通常自动重建。在我的情况下,它工作正常,但突然停止,解决方案是/proc/sys/fs/inotify/max_user_watches根据文档将值增加到文件中:https: //webpack.js.org/configuration/watch/#not-enough-watchers

run the following command:

运行以下命令:

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