Webpack:搭建本地服务器

1. 概述

webpack提供了一个可选的基于node.js的本地开发服务器,内部使用了express框架,可以实现我们想要让浏览器自动刷新显示我们修改后的结果。

2. 安装

因为它是一个单独的模块,需要安装

npm install webpack-dev-server --save-dev

3. 配置

  devServer: {
    contentBase: './dist',
    inline: true
  }

contentBase:为哪一个文件夹提供本地服务器,默认根文件夹
inline:页面实时刷新
port:我们还可以指定端口号,不写默认8080
historyApiFallback:在SPA页面中,依赖HTML5的history模式

4. 运行

一种是直接输入文件的相对地址(不推荐)

推荐在webpack.config.js中配置脚本:

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "dev": "webpack-dev-server --open"
  },

然后通过 npm run dev 即可运行,这里 --open是表示运行后自动打开网页

你可能感兴趣的:(Webpack)