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就可以看到頁面了。代碼下載