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就可以看到页面了。代码下载