Le chargement de Webpack 2 ne fonctionne pas lorsque vous déplacez la définition d'entrée et de sortie de package.json vers webpack.config.js

Question

Ceci est un peu étrange. Je sais que webpack peut être très pointilleux sur sa configuration de configuration, mais cela est un exemple très basique:

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

si je change la package.json clé « serveur » pour:

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

Le rechargement en direct fonctionnera à nouveau.

J'ai défini les clés "entry" et "output" dans webpack.config.js, donc je suppose que ça devrait marcher ... Mais "on file edit", aucun rechargement n'est déclenché. Quel est le problème avec ma configuration 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 -

Cette vidéo m'a aidé à réparer: THE WEBPACK CORE CONCEPTS | Webpack 2 Basics Tutorial

j'ai enlevé objet vide

{ 
    // second rule 
    } 

et déplacé la touche "output" à la fin du fichier de configuration. Dans la sortie, j'ai ajouté publicPath (afin que le serveur sache où chercher les autres fichiers). J'ai également supprimé la barre oblique après dist dans la touche "chemin".

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

travaille maintenant livereload et mon fichier de configuration ressemble à ceci:

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