webpack运行报错 webpack-dev-server.... 解决方法

Posted 2023-04-15

参考技术A

 Webpack与webpack-dev-server版本不兼容而导致编译出错。

 通过以下命令卸载并重新安装：
   卸载版本:

   安装指定版本

webpack-dev-server 不监视我的文件更改

【中文标题】webpack-dev-server 不监视我的文件更改

【英文标题】：webpack-dev-server does not watch for my file changes

【发布时间】：2015-06-25 16:40:58

【问题描述】：

当我在 webpack-dev-server 运行时更改我的文件时，包的文件没有更新。 这是我的 webpack.config.js 和 package.json 文件，从我的 npm 脚本中可以看出，我已经解决了在同一命令中运行 webpack watch 和 webpack-dev-server (npm run watch & webpack-dev-server --content-base ./ --port 9966)：

webpack.config.js：

'use strict';

var ReactStylePlugin = require('react-style-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var webpack = require('webpack');

module.exports = 
    devtool: 'sourcemap',
  entry: ['./js/main.js'],
  output: 
    filename: 'bundle.js',
    path: __dirname + '/assets',
    publicPath: __dirname + '/'
  ,
  module: 
    loaders: [
      
        test: /\.js$/,
        loaders: [
          ReactStylePlugin.loader(),
          'jsx-loader?harmony'
        ]
      ,
      
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('css-loader')
      
    ]
  ,
  plugins: [
    new ReactStylePlugin('bundle.css'),
    new webpack.DefinePlugin(
      'process.env': 
        // To enable production mode:
        //NODE_ENV: JSON.stringify('production')
      
    )
  ]

package.json:

  "name": "reactTest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "watch": "webpack --watch",
    "build": "webpack",
    "web": "npm run watch &  webpack-dev-server --content-base ./ --port 9966"
  ,
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "css-loader": "^0.10.1",
    "extract-text-webpack-plugin": "^0.3.8",
    "jsx-loader": "^0.13.1",
    "react-style-webpack-plugin": "^0.4.0",
    "style-loader": "^0.10.2",
    "url-loader": "^0.5.5",
    "webpack": "^1.8.5",
    "webpack-dev-server": "^1.8.0"
  ,
  "dependencies": 
    "react": "^0.13.1",
    "react-style": "^0.5.3"
  

我的目录结构是：

assets  
  bundle.css
  bundle.css.map    
  bundle.js 
  bundle.js.map 
js
  AppActions.js
  Profile.css.js
  ProfileList.js
  main.js
  AppConstants.js
  AppStore.js       
  Profile.js
  ResultPage.js     
package.json
index.html
node_modules
webpack.config.js

assets 目录下的每个文件都是由 webpack 生成的

【参考方案1】：

在我的情况下，错误是由目录名称中的空格引起的，通过将“存储库名称”更改为“存储库名称”，一切正常！

【参考方案2】：

@funkybunky 确定了正确的问题，但（恕我直言）以错误的方式修复了它。至少在我的情况下，webpack 试图监视它使用的每个文件，包括从npm 提取的数千个依赖文件的深层链。我将此添加到我的配置中，per the docs:

devServer: 
  watchOptions: 
    ignored: /node_modules/
  

当然，您可以合法地拥有数千个可能需要监视的文件，在这种情况下继续提高限制，但您最好忽略不太可能更改的供应商库。

【讨论】：

你的意思是引用 /node_modules/ 吗？

我没有。如果任何路径中的任何地方都有“node_modules”，我绝对不想看那条路径。这就是为什么我指定了一个正则表达式。

【参考方案3】：

我会把它放在这里以防万一它对任何人有帮助。我的问题也是一样，但是是目录名大小写不一致和 webpack 别名声明引起的。

我有一个 WebGL 目录，我在别名中将其引用为 webgl，不幸的是，这适用于构建，但不适用于代码监视。

【参考方案4】：

为了让 webpack 监视我的文件更改（Ubuntu 14.04），我不得不增加观察者的数量（我之前增加了数量，但还是太少了）：

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

官方文档来源：https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers

我首先怀疑原因是 fsevents 在 Ubuntu 上不起作用，但显然情况并非如此。

此外，因为现在观看和重新编译工作正常，但自动浏览器刷新部分不起作用，我在@deowk 的答案中添加了--inline 参数，它启用了“内联模式”： webpack-dev-server --content-base ./ --port 9966 --hot --inline

引用官方文档：“通过 webpack-dev-server 使用热模块替换的最简单方法是使用内联模式。” 来源：https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

【讨论】：

这是我的情况的正确答案。我在 Ubuntu 18.04 上，只有这个解决方案有效。

增加观看次数上限为我解决了问题。 Manjaro 18.1.0-rc8

附加的文档链接已损坏。

【参考方案5】：

您需要使用 --hot 标志运行 webpack-dev-server：

webpack-dev-server --content-base ./ --port 9966 --hot

然后就可以访问热加载版本localhost:9966/webpack-dev-server/

您也不需要运行 watch。

更新：

你的 webpack 配置中的这个条目必须改变：

entry: ['./js/main.js'], --> entry: ['webpack/hot/dev-server' , './js/main.js']

更改您的 publicPath 条目：

publicPath: '/assets/'

【讨论】：

这是我的第一次尝试。如果我把它放在我的 webpack conf 文件中："web": "webpack-dev-server --content-base ./ --port 9966 --hot" 并且我在localhost:9966/webpack-dev-server 上打开我的浏览器，如果我改变了什么，我看到短语“应用程序更新，重新编译..”，然后是“应用程序热更新。”，但我可以看到我的修改。如果我停止并重新启动服务器，我仍然看不到修改。如果我运行“npm run watch”或“npm run build”然后运行服务器，我会正确看到它们。

好的，让我们看看我们是否能弄清楚您的问题是什么，您能否更新您的问题以向我展示您的目录结构 - 我想检查您的基于内容的设置是否正确。听起来你的包甚至没有加载到 webpack-dev-server 中。

投票赞成，因为修改后的“入口”行对我来说是固定的。在此之前我遇到了同样的问题 - 检测到更改，命令行看起来有效，浏览器显示'应用更新'，但实际上没有重新加载。

我在条目中更新 main.js 后，页面正在刷新，但页面上尚未发生更改。 webpack-dev-server 重新编译不影响，我停止服务器，再次运行webpack，然后运行web-pack-server，然后发生更改。这是正常的还是我错过了什么？