Webpack使用教程三（webpack-dev-server）

Webpack給本地開發提供了一個可選的服務器webpack-dev-server。webpack-dev-server是一個很小的express應用，使用前須要用npm安裝，它根據webpack.config.js文件中的選項構建。常見的選項以下：

webpack-dev-server選項	選項說明
content-Base	默認狀況下，webpack-dev-server會從項目的根目錄提供文件，能夠經過此選項設置文件的目錄名
port	服務器使用的端口，默認狀況下爲8080
inline	設爲true時能夠在文件發生變化時，更新頁面
colors	設置終端輸出字體顏色
historyApiFallback	當設置爲true時，訪問全部服務器上不存在的文件，都會被重定向到/，也就是index.html文件

 

下面咱們經過簡單的例子來學習webpack-dev-server的用法（代碼下載）。項目目錄和結構仍然與教程一中的基本一致，不一樣的是要增長一個webpack.config.js文件：

module.exports = {
    devtool: 'eval-source-map',
    entry: __dirname + "/app/main.js",
    output: {
        path: __dirname + "/public",
        filename: "bundle.js"
    },
    devServer: {
        contentBase: "./public",  //以public爲根目錄提供文件
        colors: true,
        historyApiFallback: true,
        inline: true
    }
};

　　

而後運行webpack-dev-server命令，順利啓動服務器後，在瀏覽器中輸入http://localhost:8080/index.html就能夠看到頁面了。代碼下載