webpack-dev-server热重装不起作用

十三前端Harry2020-03-12

我的文件结构是：

dist
  css
    style.css
  index.html
  js
    bundle.js
src
  css
    style.css
  index.html
  js
    main.js
node_modules
webpack.config.js
package.json

我的webpack.config.js看起来像：

module.exports = {
    entry: './src/js/main.js',
    output: {
        path: __dirname,
        filename: './dist/js/bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /(node_modules)/,
                loader: 'babel',
                query: {
                    presets: ['es2015']
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue'
            }
        ]
    }
};

我跑：

webpack-dev-server --content-base dist --hot

它可以构建，并且看起来正在运行。localhost：8080显示了预期的结果，但是热重载只是不起作用。当我更改文件时，我可以在终端中看到正在重建，但是浏览器中什么也没有发生。我在配置中缺少什么吗？

西里凯2020/03/12 20:27:41

我增加了可以观看的最大文件更改数量，这对我有用。我想对我来说问题是文件太多。

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

资源

泡芙达蒙2020/03/12 20:27:41

尝试这个：

在package.json文件中，删除"test" "echo \"Error: no test specified\" && exit 1"脚本对象下包含的行，并将其替换为：

...
"scripts": {
    "start": "webpack-dev-server --hot"
  },

...

然后重新启动您的项目，只需使用npm start。

当我遇到这个问题时，这对我有用。

编辑：您可以共享您的package.json文件吗？

也尝试将其添加到webpack.config.js中

devServer: {
  inline: true,
  port: 3000,
  hot: true
},

番长GreenL2020/03/12 20:27:41

使用时webpack-dev-server，它将在内部构建所有文件，并且不会将其吐出到您的输出路径中。在webpack没有开发服务器的情况下单独运行，会将实际的编译工作复制到磁盘上。开发服务器会执行内存中的所有操作，从而大大加快了重新编译的速度。

要解决您的热装问题，请将内容库设置为源目录并启用内联模式

像这样：

webpack-dev-server --content-base src --hot --inline

猴子Davaid神乐2020/03/12 20:27:41

--inline --hot对我来说不是问题

如果您使用的是redux，可以尝试一下。

由于某种随机原因redux-devtools，不允许我进行热装。尝试从根组件和redux compose配置中删除它。

注意：在商店配置中，将此配置使用redux devtool浏览器扩展： window.devToolsExtension ? window.devToolsExtension() : f => f

另外，必须阅读：https : //medium.com/@rajaraodv/webpacks-hmr-react-hot-loader-the-missing-manual-232336dc0d96#.ejpsmve8f

或尝试热重装3：示例：https：//github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915

村村AL2020/03/12 20:27:41

Webpack热重装对我也停止了工作。对我来说，解决方案是删除node_modules文件夹并重新安装所有依赖项。只需node_modules在终端中打开的父文件夹并运行npm install

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer