Webpack-dev-server не отслеживает изменения моего файла

Когда я меняю свои файлы во время работы webpack-dev-сервера, файлы пакета не обновляются. Вот мои файлы webpack.config.js и package.json, как вы можете видеть из моего npm script, я решил запустить 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

вам нужно запустить webpack-dev-сервер с флагом -hot:

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

Затем вы можете получить доступ к горячей загрузке версии localhost: 9966/webpack-dev-server/

Вам также не нужно запускать часы.

обновление:

Эта запись в вашей конфигурации webpack должна измениться:

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

Измените запись publicPath:

publicPath: '/assets/'

Ответ 2

Чтобы 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, но это, по-видимому, не так.

Кроме того, поскольку теперь работа над просмотром и повторной компиляцией работала, но часть автоматического обновления браузера не работала, я добавил параметр --inline в ответ @deowk, который разрешает "встроенный режим": webpack-dev-server --content-base ./ --port 9966 --hot --inline

Цитата из официальных документов: "Самый простой способ использования Hot Mod Replacement с помощью webpack-dev-сервера - использовать встроенный режим". Источник: https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

Ответ 3

@funkybunky определил правильную проблему, но (IMHO) исправил ее неправильно. По крайней мере, в моем случае webpack пытался просмотреть каждый файл, который он использовал, включая глубокую цепочку из тысяч файлов зависимостей, вытащенных из npm. Я добавил это в свою конфигурацию, для документов:

devServer: {
  watchOptions: {
    ignored: /node_modules/
  }
}

Конечно, у вас законно может быть тысячи файлов, которые, возможно, понадобятся для просмотра, и в этом случае идти вперед и повышать лимит, но вам, вероятно, лучше игнорировать библиотеки поставщиков, которые вряд ли будут меняться.

Ответ 4

Я поставлю это здесь на всякий случай, если это поможет кому угодно. Моя проблема была такой же, но вызвана несогласованной заглавностью имен каталогов и объявления псевдонима webpack.

У меня был каталог WebGL, на который я ссылался в своих псевдонимах как WebGL, и, к сожалению, это сработало для сборки, но не работало для просмотра кода.

Ответ 5

В моем случае ошибка была вызвана пустым пространством в имени каталога, изменив имя "Repository Name" на "RepositoryName", все сработало нормально!