Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

webpack-dev-server does not watch for my file changes

When I change my files while webpack-dev-server is running, the bundle's files are not updated. Here are my webpack.config.js and package.json files, as you can see from my npm script, I've solved running webpack watch and webpack-dev-server in the same command (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"   } } 

my directory structure is:

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 

every file inside assets directory is generated by webpack

like image 664
Jurgo Boemo Avatar asked Apr 18 '15 20:04

Jurgo Boemo


People also ask

How can we make the webpack to watch for changes?

Using Watch Mode You can instruct webpack to "watch" all files within your dependency graph for changes. If one of these files is updated, the code will be recompiled so you don't have to run the full build manually. Now run npm run watch from the command line and see how webpack compiles your code.

Where does webpack-dev-server serve files from?

Content Base. The webpack-dev-server will serve the files in the current directory, unless you configure a specific content base. Using this config webpack-dev-server will serve the static files in your public folder. It'll watch your source files for changes and when changes are made the bundle will be recompiled.

How do I watch Webpacks?

Other Ways to Enable Watch Mode You can also enable watch mode from your Webpack config file: module. exports = { mode: 'development', watch: true, // Enable watch mode entry: { app: `${__dirname}/app. js` }, target: 'web', output: { path: `${__dirname}/bin`, filename: '[name].


2 Answers

In order to get webpack to watch my file changes (Ubuntu 14.04), I had to increase the number of watchers (I had increased the number before, but it was still too low):

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

Source in the official docs: https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers

I first suspected the cause to be fsevents which doesn't work on Ubuntu, but this apparently wasn't the case.

Furthermore, because now the watching and re-compiling worked, but the automatic browser refresh part didn't work, I added the --inline param to the answer of @deowk which enables the "inline mode": webpack-dev-server --content-base ./ --port 9966 --hot --inline

Quote from the official docs: "The easiest way to use Hot Module Replacement with the webpack-dev-server is to use the inline mode." Source: https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

like image 53
funkybunky Avatar answered Oct 02 '22 14:10

funkybunky


you need to run webpack-dev-server with the --hot flag:

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

Then you can access the hot-loading version localhost:9966/webpack-dev-server/

You don't need to run watch as well.

update:

This entry in your webpack config must change:

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

Change your publicPath entry:

publicPath: '/assets/'

like image 34
deowk Avatar answered Oct 02 '22 16:10

deowk