Vue.js 学习笔记十一：Webpack之webpack 配置 搭建本地服务器

目录

webpack 配置

搭建本地服务器

---

webpack 配置

搭建本地服务器

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

不过它是一个单独的模块，在 webpack 中使用之前需要先安装它。

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

 

 修改 webpack 配置文件，告知 dev server，从什么位置查找文件：

module.exports = {
	devServer: {
		contentBase: './dist',
		inline: true
	}
};

以上配置告知 webpack-dev-server，将 dist 目录下的文件 serve 到 localhost:8080 下，页面并实时刷新。

devServer 也是作为 webpack 中的一个选项，选项本身可以设置如下属性：

contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写 ./dist

port：端口号

inline：页面实时刷新

historyApiFallback：在单页面 Web 应用 SPA（single page web application,SPA） 页面中，依赖 HTML5 的 history 模式

我们添加一个可以直接运行 dev server 的 script：

package.json

"scripts": {
    "build": "webpack --mode=development",
    "dev": "webpack serve --open"
  },

--open 参数表示直接打开浏览。