webpack入門的注意事項-啓動webpack-dev-server

啓動webpack-dev-server

寫在前面的話

webpack入門常遇到的一些簡單問題，作一個我的的小小記錄！
webpack使用的版本爲： 2.2.0
webpack-dev-server使用的版本爲： 2.2.0

注意事項

一、安裝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 webpack@2.2.0 --save-dev
// webpack-dev-server
npm i webpack-dev-server@2.2.0 --save-dev

若是須要卸載能夠參考下面的命令

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

二、配置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

在瀏覽器裏預覽，打開網址http://localhost:10001/webpac...，格式爲：

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

資料推薦

webpack的詳細說明：入門 Webpack，看這篇就夠了