Webpack 2 Liveload funktioniert nicht, wenn die Eingabe- und Ausgabendefinition von package.json nach webpack.config.js verschoben wird

Question

Das ist ein bisschen seltsam. Ich weiß, dass webpack kann über seine Konfiguration Setup sehr pingelig sein, aber dies ist ein sehr einfaches Beispiel:

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" 
    } 
} 

wenn ich die package.json „Server“ Schlüssel zu ändern:

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

Live-Nachladen wird wieder funktionieren.

Ich habe die "Eingabe" und die "Ausgabe" Schlüssel in webpack.config.js definiert, also nehme ich an, dass es funktionieren sollte ... Aber "on file edit", wird kein Nachladen ausgelöst. Was ist falsch an meiner webpack.config.js-Konfiguration?

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 -

Dieses Video hat mir geholfen, es zu beheben: THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial

ich leeres Objekt

{ 
    // second rule 
    } 

entfernt und Der "output" -Schlüssel wurde am Ende der Konfigurationsdatei verschoben. In der Ausgabe habe ich publicPath hinzugefügt (damit der Server weiß, wo er auf andere Dateien achten muss). Ich habe auch den Schrägstrich nach dist in der "Pfad" -Taste entfernt.

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

Jetzt livereload funktioniert und meine Config-Datei sieht wie folgt aus:

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' 
    } 
}