web-dev-qa-db-ja.com

Webpackホットモジュールの交換が機能しない

私はWebPackを正常にセットアップしました-それは私のバベルとSCSSファイルをうまくコンパイルしていて、私は時計の機能をうまく機能させました。しかし、私もホットモジュールの交換を使用したいと思います-そしてそれを実現するのに苦労しています。ブラウザに開発サーバーをロードすると、Cannot resolve module 'webpack/hot/dev-server'。私の設定は次のようになります：

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

そして私のindex.htmlには次が含まれます：

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

誰かアイデアはありますか？

webpackwebpack-dev-server
19
Alastair

インストールした場合webpack-dev-serverグローバル、つまりnpm install webpack-dev-server -g、ローカルにインストールしてみてください（オプションを削除するだけです-g）。

そうすることでこの問題を解決しました。

14
syfee

[〜＃〜]重要[〜＃〜]

[email protected]を使用している場合は、必ずインストールしてください

[email protected]

実行中npm install webpack-dev-server webpack 2ではナイスを再生しません。

これはおそらく、バージョン2がまだベータ版である間だけ当てはまります。

このトピックに関するドキュメントは非常に断片化されているため、これを機能させるのにも苦労しました。

この簡単な作業例を見つけました：

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

コードは自明です。

6
Dieter Gribnitz

私は同様の問題に遭遇しました。ローカルにwebpackをインストールして修正しました。ローカル開発依存関係としてwebpackをインストールするには：npm i -D webpack

4
thiagodebastos