开发环境

# 七. 开发环境

# 1 devServer

webpack-dev-server 为你提供了一个简单的 web 服务器，并且能够实时重新加载(live reloading)。

# 1) 配置 devServer

# i 安装

执行命令

npm install -D webpack-dev-server

# ii 基本配置

示例

webpack 配置

// devServer配置
devServer: {
  // 指定服务器根目录
  contentBase: './dist',
  // 自动打开浏览器
  open: true
},

1
2
3
4
5
6
7

在 package.json 中添加一个脚本

示例

"scripts": {
  "start": "webpack-dev-server"
},

1
2
3

在命令行中执行npm run start启动 devServer

# 2) 测试

测试发现, 只要代码修改后, webpack 会自动重新打包, 页面会重新刷新加载. 这样就不需要每次执行打包命令了

# 3) 其他常见配置

查看该部分的相关文档 (opens new window)

host: 服务器主机
port: 端口
open: 打开浏览器
hot: 热模块替换
proxy: 代理

# 2 热模块替换

查看该部分的相关文档 (opens new window)

# 1) 启用

# i 配置

示例

devServer: {
  // 指定服务器根目录
  contentBase: './dist',
  // 自动打开浏览器
  open: true,
  // 启用热模块替换
  hot: true
},

1
2
3
4
5
6
7
8

# ii 插件

# 2) 测试

编写业务代码 App.vue

示例

<template>
  <div>
    <h1>TodoList</h1>
    <input type="text" v-model="content" />
    <button @click="addTodo">添加</button>
    <ul>
      <li v-for="item of todoData" :key="item.id">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
import './assets/styles/global.styl'

export default {
  name: 'App',
  data() {
    return {
      todoData: ['todo1', 'todo2', 'todo3'],
      content: '',
    }
  },
  methods: {
    addTodo() {
      if (this.content === '') return

      this.todoData.push(this.content)
      this.content = ''
    },
  },
}
</script>

<style lang="stylus" scoped>
li:nth-of-type(odd)
  color: red
</style>