Webpack: webpack-dev-server ve Hot Reload'u nasıl kurarım

Question

npm run watch komutunu çalıştırdığımda Hot Reloading olmasını isterim. (vue-cli - npm run dev komutunu çalıştırırken çalışırken çalıştığından çalışmasını isterim: https://vue-loader.vuejs.org/en/features/hot-reload.html).

Yani, webpack-dev-sunucu yükledim ve bu ne denedim:

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

Eğer "watch" senaryoya bakmak ise - webpack-dev-server kullanır ve ayrıca --open --hot vardır - bu, vue-cli's package.json ile aynıdır. Ayrıca

, işte webpack.config.js geçerli:

Ben ExtractTextPlugin (Ben ayrı bir CSS dosyası var), dosya yükleyici eklentisini (kullanıyorum

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 
      } 
     }) 
    ); 
} 

Not url/images) vb.

npm run watch komutunu çalıştırdığımda - Hot Relaoding yok, hiçbir şey olmuyor. Hata yoktur, ancak hiçbir şey yapmaz, tarayıcıda yalnızca index.html'u açar (http://localhost:8080).

Hiçbir değişiklik algılanmadı. Örneğin, ben düzenlerseniz:

• app.scss
• index.html

... bu değişiklikler yüklenmez. Ben iyi hatırlıyorum eğer dist dizini sildiyseniz

Hatta vue-cli yılında, (bir şey derleme değil - Eğer npm run dev çalıştırdığınızda - tekrar dist dizini yeniden yaratacak ve orada derlenmiş varlıkları koyacaktır ... ama burada, eğer derlenmiş varlıkları sildiyseniz - yeni olanları derlemeyecek/yaratamayacaktır.

Answer 1

Kendi projelerimi önyüklemek için kullandığım bir şablon projem var ve çalışmayı yeniden yapıyor. Webpack-dev-sunucu çalıştırmak için yudum kullanıyor, ancak bir göz atın ve kendi webpack.conf.js geri alakalı bit ekleyebilirsiniz:

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