2015-03-26 14 views
19

Z powodzeniem skonfigurowałem pakiet WebPack - kompilacja plików babel i SCSS jest w porządku, a funkcja zegarka działa prawidłowo. Ale chciałbym także pracować z wymianą modułów Hot - i mam problemy z jej uruchomieniem. Kiedy ładuję serwer dev w mojej przeglądarce, pokazuje on Cannot resolve module 'webpack/hot/dev-server'. Mój config wygląda następująco:Nie można uzyskać wymiany modułu hot pack w sieci Web do pracy

import webpack from 'webpack'; 
import wpServer from 'webpack-dev-server'; 

var compiler = webpack({ 
    entry: [ 
     './src/core.js', 
     'webpack/hot/dev-server' 
    ], 
    output: { 
     path: outPath, 
     filename: '[name].js' 
    }, 
    resolveLoader: { root: path.join(MODULE_PATH, "node_modules") }, 
    module: { 
     loaders: [ 
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, 
      { test: /\.scss$/, loader: "style!css!sass" } 
     ] 
    }, 
    plugins: [new webpack.HotModuleReplacementPlugin()], 
    watch: true 
}); 

var server = new wpServer(compiler, { 
    contentBase: outPath, 
    hot: true, 
    quiet: false, 
    noInfo: false, 
    lazy: true, 
    filename: "main.js", 
    watchDelay: 300, 
    headers: { "X-Custom-Header": "yes" }, 
    stats: { colors: true }, 
}); 
server.listen(8080, "localhost", function() {}); 

i mój index.html zawiera:

<script src="http://localhost:8080/webpack-dev-server.js"></script> 
<script src='main.js'></script> 

Czy ktoś ma jakieś pomysły?

+1

Nie można łączyć trybu leniwego z programem Hackback-dev-server z HMR. Tryb leniwy rekompiluje się tylko na żądanie HTTP. HMR polega na obserwatorach, którzy rekompilują zmiany. Zamiast tego użyj 'lazy: false' lub po prostu go pomiń. –

+0

Zamieściłem małe wyjaśnienie na temat działania HMR i tego, co jest wymagane, aby to działało: http://stackoverflow.com/questions/37016683/what-aspect-of-hot-module-replacement-is-this-article- for/37022884 # 37022884 –

Odpowiedz

14

Jeśli zainstalowano globalnie webpack-dev-server, czyli npm install webpack-dev-server -g, spróbuj zainstalować lokalnie (wystarczy usunąć opcję -g).

Rozwiązałem ten problem, robiąc to.

+0

Wygląda na to, że opcja '--hot' szuka lokalnie niektórych plików. Może istnieje sposób, aby powiedzieć, że są zainstalowane globalnie. Powód, dla którego instalowanie dev-serwera lokalnie i globalnie wydaje się niezręczne. –

+2

@yvesamsellem Założę, że ten problem ma związek z tym, w jaki sposób 'webpack-dev-server' określa podstawowy katalog twojego projektu. Sprawdziłem dokumenty i wygląda na to, że narzędzie odsłania opcję '--content-base', aby zastąpić domyślną. Tak czy inaczej, instalowanie go jako lokalnej 'devDependency' powinno być preferowanym podejściem do zachowania spójności na różnych platformach. –

4

Wpadłem na podobny problem. Naprawiłem to, lokalnie instalując webpack. Aby zainstalować WebPACK jako lokalny uzależnienia dev: npm i -D webpack

6

WAŻNE


Jeśli używasz [email protected] upewnić zainstalowaniu

[email protected] 

Po prostu działa npm install webpack-dev-server nie będzie dobrze grać z pakietem internetowym 2.

Prawdopodobnie będzie to prawdą tylko wtedy, gdy wersja 2 nadal znajduje się w wersji beta.


Starałem się również uzyskać tę funkcję, ponieważ dokumentacja na ten temat jest bardzo pofragmentowana.

Znaleźliśmy ten prosty przykład roboczy:

https://github.com/ahfarmer/webpack-hmr-starter-dev-server-api

Code jest dość oczywista.

Powiązane problemy