webpack - часы не работают

Question

webpack --watch не работает, но webpack делает, когда я редактирую некоторые изменения в моем js, наблюдатель не будет делать никаких обновлений в моем DOM (html), поэтому мне придется перезагружать (do webpack снова), чтобы он обновил изменения.

коды, которые могут иметь ошибку:

package.json:

`{ 
    "name": "samplereact", 
    "version": "1.0.0", 
    "main": "webpack.config.js", 
    "dependencies": { 
    "babel-loader": "^6.2.4", 
    "babel-plugin-add-module-exports": "^0.1.4", 
    "babel-plugin-react-html-attrs": "^2.0.0", 
    "babel-plugin-transform-class-properties": "^6.9.0", 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.5.0", 
    "babel-preset-stage-0": "^6.5.0", 
    "core-js": "^2.4.0", 
    "react": "^0.14.8", 
    "react-dom": "^0.14.8", 
    "webpack": "^1.13.1", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "devDependencies": {}, 
    "scripts": { 
    "dev": "./node_modules/.bin/webpack-dev-server --content-base src --inline --hot", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "description": "" 
} 
` 

webpack.config.js:

var debug = process.env.NODE_ENV !== "production"; 
var webpack = require('webpack'); 

module.exports = { 
    context: __dirname + "/src", 
    devtool: debug ? "inline-sourcemap" : null, 
    entry: "./js/scripts.js", 
    module: { 
    loaders: [ 
     { 
     test: /\.js?$/, 
     exclude: /(node_modules|bower_components)/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'], 
      plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'] 
     } 
     } 
    ] 
    }, 
    output: { 
    path: __dirname + "/src/", 
    filename: "scripts.min.js" 
    }, 
    plugins: debug ? [] : [ 
    new webpack.optimize.DedupePlugin(), 
    new webpack.optimize.OccurenceOrderPlugin(), 
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }) 
    ] 
}; 

И моя структура папок это:

Я только положил package.json и webpack.config .js здесь, потому что я подозревал, что только один из них является источником, почему мои часы не работают.

btw Я следовал этому руководству (https://www.youtube.com/watch?v=MhkGQAoc7bc) и даже tho 'Я смотрел его 5 раз, я не могу найти проблему, почему эти часы не работают.

Answer 1

Вероятно, вы столкнулись с чувствительностью webpack к разделителям путей, которые укусили меня много раз.

Хитрость заключается в использовании path.sep или path.join вместо / при указании вашего контекста. Таким образом, вы бы изменить это:

context: __dirname + '/src', 
entry: './src/scripts.js', 

к этому:

context: path.join(__dirname, 'src'), 
entry: './scripts.js', 

Обратите внимание, что точка входа может по-прежнему использовать ./, как это решить с помощью require, но context что WebPack использует для --watch (Кроме того, у вас было src как в контексте, так и в записи, что я предполагаю излишним).