你的位置:首页 > Java教程

[Java教程]Webpack使用教程三(webpack

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