![Webpack使用教程三(webpack-dev-server) Webpack使用教程三(webpack-dev-server)](https://image.shishitao.com:8440/aHR0cHM6Ly9ia3FzaW1nLmlrYWZhbi5jb20vdXBsb2FkL2NoYXRncHQtcy5wbmc%2FIQ%3D%3D.png?!?w=700&webp=1)
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就可以看到页面了。代码下载