npm - open - webpack-dev-server no vigila mis cambios de archivos

webpack dev server-- mode development

Question

Cuando cambio mis archivos mientras se está ejecutando webpack-dev-server, los archivos del paquete no se actualizan. Aquí están mis archivos webpack.config.js y package.json, como puede ver en mi script npm, he resuelto ejecutar el webpack watch webpack-dev-server en el mismo comando ( 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"
}
}

mi estructura de directorio es:

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

cada archivo dentro del directorio de assets es generado por el paquete web

Answer 1

@funkybunky identificó el problema correcto pero (en mi humilde opinión) lo solucionó de la manera incorrecta. Al menos en mi caso, el paquete web estaba tratando de ver cada archivo que usaba, incluida una cadena de miles de archivos de dependencias extraídas de npm . Agregué esto a mi configuración, según los documentos :

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

Por supuesto que legítimamente podría tener miles de archivos que podrían necesitar ser vistos, en cuyo caso siga adelante y aumente el límite, pero probablemente sea mejor que ignore las bibliotecas de proveedores que probablemente no cambien.

Answer 2

Con el fin de obtener el paquete web para ver los cambios de mi archivo (Ubuntu 14.04), tuve que aumentar el número de observadores (había aumentado el número antes, pero todavía era demasiado bajo):

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

Fuente en los documentos oficiales: https://webpack.github.io/docs/troubleshooting.html#not-enough-watchers

Primero sospeché que la causa era fsevents que no funciona en Ubuntu, pero aparentemente este no era el caso.

Además, como ahora la observación y la compilación funcionaban, pero la parte de actualización automática del navegador no funcionaba, añadí el --inline param a la respuesta de @deowk que habilita el "modo en línea": webpack-dev-server --content-base ./ --port 9966 --hot --inline

Cita de los documentos oficiales: "La forma más fácil de usar el reemplazo de módulo activo con el servidor webpack-dev es usar el modo en línea". Fuente: https://webpack.github.io/docs/webpack-dev-server.html#hot-module-replacement

Answer 3

En mi caso, el error fue causado por un espacio vacío en el nombre del directorio, al cambiar "Nombre del repositorio" por "Nombre del repositorio", ¡todo funcionó bien!

Answer 4

Pondré esto aquí en caso de que ayude a alguien. Mi problema era el mismo, pero se debía a una mayúscula inconsistente de los nombres de directorio y la declaración de alias de paquete web.

Tenía un directorio WebGL que hacía referencia en mis alias como webgl , y lamentablemente esto funcionó para la compilación, pero no funcionó para la webgl de código.

Answer 5

necesita ejecutar webpack-dev-server con el indicador --hot:

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

A continuación, puede acceder a la versión de carga en caliente localhost: 9966 / webpack-dev-server /

No es necesario ejecutar la vigilancia también.

actualizar:

Esta entrada en su configuración de paquete web debe cambiar:

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

Cambie su entrada de PublicPath:

publicPath: ''/assets/''