Webpack入門の注意事項-webpack-dev-serverの起動

Webpack-dev-serverの起動
前に書いてあると

webpack            ，          ！
webpack      ： 2.2.0
webpack-dev-server      ： 2.2.0

注意事項
1、webpackとwebpack-dev-serverをインストールする
ネット上にはwebpackとwebpack-dev-serverに関するチュートリアルがたくさんありますが、webpackとwebpack-dev-serverのバージョンに注意してください.バージョンの問題で多くの異常が発生します.推奨インストールバージョンはwebpack:2.2.0とwebpack-dev-server:2.2.0です.

// webpack
npm i [email protected] --save-dev
// webpack-dev-server
npm i [email protected] --save-dev

アンインストールが必要な場合は、次のコマンドを参照してください.

// webpack
npm uninstall webpack --save-dev
// webpack-dev-server
npm uninstall  webpack-dev-server --save-dev

2、webpack-dev-serverを構成し、ホットモジュールを起動する
まず、webpack-dev-server起動生成パッケージファイル(jsファイル)は仮想ファイルであり、エンティティファイルが生成されず、メモリに格納されているため、webpack-dev-serverを起動するとパッケージファイルがないことが正常であることに注意してください.ホットスタートモジュールにはiframeモードとinlineモードがあり、iframeモードは比較的簡単で、iframeモードを入門することをお勧めします.ここでもiframeモードを例に挙げます.
注意が必要なのはdevServerとpluginsのパラメータで、他のパラメータは自分のプロジェクトで構成されています.プロファイルwebpack.config.js,:

// webpack.config.js

var path = require('path'); //              
var webpack = require('webpack');

module.exports = {
    //     Source Maps，       
    //         ：eval-source-map；\
    //         ：source-map
    // cheap-module-eval-source-map        ，       ，         da       。
    devtool: 'eval-source-map', 
    entry: [
        //                      ，             。
        'webpack/hot/dev-server',
        'webpack-dev-server/client?http://localhost:10001',
        //         
        __dirname + "/src/js/test-server/main.js"
    ],
    output: {
        path: __dirname + "/test-server/js",
        filename: 'test.js'
    },
    module: {
        loaders: []
    },
    //       
    devServer: {
        //                  ，  webpack-dev-server             
        contentBase: "./test-server",
        //      ，   8080
        port: 10001,
        //    
        historyApiFallback: true
    },
    plugins: [
        //           
        new webpack.HotModuleReplacementPlugin()
    ]
}

Webpack.config.jsでdevServerを構成しているため、テストサービスを開始する方法は、コマンドラインに直接入力されます.

webpack-dev-server

ブラウザでプレビューし、Webサイトを開きます.http://localhost:10001/webpac...を選択します.

http://«host»:«port»/webpack-dev-server/«path»

資料の推薦
Webpackの詳しい説明:Webpackに入門して、この編を見て十分です