[JavaScript知识库]【webpack】webpack开发热更新，引入vue

webpack-dev-server开发热更新

• 安装webpack-dev-server@3.10.3

npm install webpack-dev-server@3.10.3 -D

• 在webpack.config.js添加配置项devServer

// 配置webpack-dev-server
  devServer: {
    // 端口号
    port: 8088,
    // 自动打开浏览器
    open: true
  },

• 执行命令：

npx webpack-dev-server

• 看到的效果是：可以在控制台看到项目运行的服务地址，会自动打开浏览器。并且是热更新的，只要代码修改后保存，页面就会重新渲染。

webpack中引入vue

• 安装vue@2.6.12，-D表示开发依赖，-S表示生产依赖，由于vue是要参与打包的所以要下载生产依赖。

npm install vue@2.6.12 -S

• 在main.js引入vue并且定义实例：

// 引入vue
import Vue from 'vue'
Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: function(h) {
    return h('h1', `姓名：${this.name}---年龄：${this.age}`)
  },
  data() {
    return {
      name: '张三',
      age: 12
    }
  }
})

使用vue单组件开发

• 上面使用在render写标签的方法，在页面元素比较多的时候是极其复杂的，下面开始使用vue单组件开发。
• 在src目录下创建components文件夹，并且添加文件home.vue

<template>
  <div>
    {{ msg }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: '这是home组件'
    }
  }
}
</script>

<style>

</style>

• 在main.js引入home组件,并且修改render

// 引入home组件
import Home from '../src/components/home.vue'

// 修改render
render: function(h) {
    return h(Home)
},

• 保存之后发现控制台报错，提醒我们缺少loader，因为webpack不认识vue文件，因此跟css文件一样，需要loader处理。
• 安装vue-loader@15.9.6和vue-template-compiler@2.6.12

npm install vue-loader@15.9.6 -D
npm install vue-template-compiler@2.6.12 -D

• 在webpack.config.js添加代码

首先在module的rules添加引用vue-loader

// 处理vue文件
{
    test: /\.vue/i,
        loader: ['vue-loader']
}

引入vue-loader插件

// 引入处理vue文件的插件
const { VueLoaderPlugin } = require('vue-loader')

在plugins里面new插件

// 引入处理vue文件的插件
new VueLoaderPlugin()

• 重新执行命令

npx webpack-dev-server

• 就可以在页面上看到home组件的内容了，这样以home组件为容器，将其他组件作为子组件在home中引入，就实现了单页面应用开发

简化指令

• 在webpack.json的script中添加

  "dev": "npx webpack-dev-server"
  

• 只有只要执行npm run dev就可以运行程序，效果与npx webpack-dev-server一致

配置路径别名

• 在webpack.config.js中添加配置项resolve

 // 配置路径别名
  resolve: {
    alias: {
      '@a': path.resolve(__dirname, 'src')
    }
  },

• 实现的效果是用@a替代路径src，如

// import Home from '../src/components/home.vue'
// 简写成
import Home from '@a/components/home.vue'