Webpack: Wie man webpack-dev-server und Hot Reload einrichtet

Question

Ich hätte gerne Hot Reloading, wenn ich den npm run watch Befehl ausführen. (Ich möchte, dass es funktioniert, wie es funktioniert, wenn Sie die vue-cli verwenden - wenn Sie den npm run dev Befehl ausführen: https://vue-loader.vuejs.org/en/features/hot-reload.html). So

habe ich webpack-dev-Server installiert und das, was ich habe versucht:

package.json:

{ 
    "name": "webpack-learning", 
    "version": "1.0.0", 
    "description": "", 
    "scripts": { 
    "dev": "cross-env NODE_ENV=development webpack", 
    "watch": "cross-env NODE_ENV=development webpack-dev-server --open --hot", 
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" 
    }, 
    "keywords": [], 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^6.24.1", 
    "babel-loader": "^7.0.0", 
    "babel-preset-es2015": "^6.24.1", 
    "cross-env": "^5.0.0", 
    "css-loader": "^0.28.1", 
    "extract-text-webpack-plugin": "^2.1.0", 
    "file-loader": "^0.11.1", 
    "node-sass": "^4.5.2", 
    "purifycss-webpack": "^0.6.2", 
    "sass-loader": "^6.0.5", 
    "style-loader": "^0.17.0", 
    "webpack": "^2.4.1", 
    "webpack-dev-server": "^2.4.5" 
    } 
} 

Wenn Sie den Blick auf "watch" Skript - es verwendet webpack-dev-server und es hat auch --open --hot - das ist das gleiche wie in vue-cli's package.json.

Auch hier ist meine webpack.config.js:

var webpack = require('webpack'); 
var path = require('path'); 
const glob = require('glob'); 
const ExtractTextPlugin = require("extract-text-webpack-plugin"); 
const PurifyCSSPlugin = require('purifycss-webpack'); 
var inProduction = (process.env.NODE_ENV === 'production'); 

module.exports = { 
    entry: { 
     app: [ 
      './src/js/main.js', 
      './src/sass/app.scss' 
     ] 
    }, 
    output: { 
     path: path.resolve(__dirname, './dist'), 
     filename: '[name].js' 
    }, 

    module: { 
     rules: [ 
      { 
       test: /\.s[ac]ss$/, 
       use: ExtractTextPlugin.extract({ 
        use: ['css-loader', 'sass-loader'], 
        fallback: 'style-loader' 
       }) 
      }, 
      { 
       test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/, 
       loader: 'file-loader', 
       options: { 
        name: '[name].[ext]?[hash]' 
       } 
      }, 
      { 
       test: /\.css$/, 
       use: ['style-loader', 'css-loader'] 
      }, 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: "babel-loader" 
      } 
     ] 
    }, 

    plugins: [ 
     new ExtractTextPlugin('[name].css'), 

     new PurifyCSSPlugin({ 
      paths: glob.sync(path.join(__dirname, 'index.html')), 
      minimize: inProduction 
     }), 

     new webpack.LoaderOptionsPlugin({ 
      minimize: inProduction 
     }) 
    ], 

    devtool: '#eval-source-map' 
}; 

if (inProduction) { 
    module.exports.devtool = '#source-map'; 

    module.exports.plugins.push(
     new webpack.optimize.UglifyJsPlugin({ 
      sourceMap: true, 
      compress: { 
       warnings: false 
      } 
     }) 
    ); 
} 

Beachten Sie, dass ich bin mit dem ExtractTextPlugin (Ich habe eine separate CSS-Datei), Datei-loader Plugin (für URL/Bilder) usw.

Wenn ich den Befehl npm run watch ausführen - es gibt keine Hot Relaoding, passiert nichts. Es gibt keine Fehler, aber es tut nichts, es öffnet nur index.html im Browser (http://localhost:8080).

Keine Änderungen erkannt. Zum Beispiel, wenn ich bearbeiten:

• app.scss
• index.html

... werden diese Änderungen nicht geladen.

Es ist alles nicht einmal kompilieren (wenn ich in vue-cli gut, denken Sie daran, wenn Sie das dist Verzeichnis gelöscht haben - wenn Sie laufen npm run dev - es wird die dist Verzeichnis wieder neu erstellen und es wird die kompilierten Assets dort ablegen ... aber hier, wenn Sie die kompilierten Assets gelöscht haben - es wird nicht kompiliert/erstellt die neuen Assets.

Answer 1

Ich habe ein Template-Projekt, das ich verwendet habe, um meine eigenen Projekte zu starten, und es hat heißes Nachladen funktioniert. Es ist mit schluck den webpack-dev-Server ausgeführt werden, aber Sie können einen Blick und die entsprechenden Bits zurück zu Ihrem eigenen webpack.conf.js hinzufügen:

https://github.com/vhogemann/angular2-starter/blob/master/config/gulp.dev-server.js