入力と出力の定義をpackage.jsonからwebpack.config.jsに移動するときにWebpack 2のlivereloadが機能しない

Question

これは少し変です。私はWebPACKのは、その構成のセットアップについて非常にうるさいことができることを知っているが、これは非常に基本的な例です。

package.json

{ 
    "name": "webpactest", 
    "version": "1.0.0", 
    "description": "", 
    "main": "src/main.js", 
    "scripts": { 
    "server": "webpack-dev-server", 
    "build": "rm -rf ./dist && webpack -d --watch", 
    "build:prod": "rm -rf ./dist && webpack -p" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-env": "^1.5.1", 
    "css-loader": "^0.28.4", 
    "extract-text-webpack-plugin": "^2.1.0", 
    "node-sass": "^4.5.3", 
    "sass-loader": "^6.0.5", 
    "style-loader": "^0.18.2", 
    "webpack": "^2.6.1", 
    "webpack-dev-server": "^2.4.5" 
    } 
} 

私はpackage.json「サーバー」キーを変更した場合：

"server": "webpack-dev-server --entry ./src/app.js --output-filename ./dist/bundle.js", 

ライブリロードが再び機能します。

webpack.config.jsで "entry"と "output"キーを定義しましたので、うまくいくはずです。しかし、 "ファイル編集中"では、リロードはトリガーされません。 webpack.config.jsの設定で何が問題になっていますか？

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var path = require('path'); 

module.exports = { 
    entry: [ 
    path.resolve(__dirname, "src/app.js"), 
    path.resolve(__dirname, "src/sass/main.sass") 
    ], 
    module: { 
    rules: [ 
     { 
     test: /\.sass$/, 
     include: [ 
      path.resolve(__dirname, "./src/sass") 
     ], 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      //resolve-url-loader may be chained before sass-loader if necessary 
      use: [ 
      { 
       loader: 'css-loader', 
       options: { 
       minimize: true, 
       options: { sourceMap: true } 
       } 
      }, 
      'sass-loader' 
      ] 
     }) 
     }, 
     { 
     // second rule 
     } 
    ] 
    }, 
    output: { 
    path: path.resolve(__dirname, 'dist/'), 
    filename: 'bundle.js' 
    }, 
    plugins: [ 
    new ExtractTextPlugin('bundle.css') 
    ], 
} 

Answer 1

- FIXED -

このビデオでは、それを修正するために私を助け： THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial

私は空のオブジェクトに

{ 
    // second rule 
    } 

を削除そして設定ファイルの最後に "output"キーを移動しました。 出力では、パブリックパスを追加しました（サーバーが他のファイルを監視する場所を知るように）。私はまた、 "パス"キーでdistの後にスラッシュを削除しました。

output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/dist' 
    } 

は今livereload働いていると私の設定ファイルは次のようになります。

webpack.config.js

const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
var path = require('path'); 

module.exports = { 
    entry: [ 
    path.resolve(__dirname, "src/app.js"), 
    path.resolve(__dirname, "src/sass/main.sass") 
    ], 
    module: { 
    rules: [ 
     { 
     test: /\.sass$/, 
     include: [ 
      path.resolve(__dirname, "./src/sass") 
     ], 
     use: ExtractTextPlugin.extract({ 
      fallback: 'style-loader', 
      //resolve-url-loader may be chained before sass-loader if necessary 
      use: [ 
      { 
       loader: 'css-loader', 
       options: { 
       minimize: true, 
       options: { sourceMap: true } 
       } 
      }, 
      'sass-loader' 
      ] 
     }) 
     }, 
    ] 
    }, 
    plugins: [ 
    new ExtractTextPlugin('bundle.css') 
    ], 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js', 
    publicPath: '/dist' 
    } 
}