Vue Webpack

目的：建立开发、测试、部署的自动化环境

脚手架 vue-cli

vue-cli 的存在将项目环境的初始化工作和复杂度降到了最低

# 更新NPM
$ npm i npm -g

# 安装Vue-cli
$ npm i vue-cli -g

指令解析

• 用法：vue <命令> [选项]
• 命令：
  • init 从指定模板中生成新项目
  • list 罗列出所有可用的官方模板
  • help [cmd] 显示命令的帮助文档
• 选项
  • -h,--help 输出用法信息
  • --V,--version 输出版本号

官方模板

$ vue list
  
Available official templates:

  ★  browserify - 拥有高级的Browserify+vueify，用于高级开发。
  ★  browserify-simple - 拥有基础功能的Browserify+vueify，用于快速原型开发。
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - 用于单页应用开发的最小配置
  ★  webpack - 拥有高级功能的webpack+vue-loader，用于正式开发。
  ★  webpack-simple - 拥有基础功能的webpack + vue-loader，用于快速原型开发。

创建项目

$ vue init webpack projectName

深入工程模板

webpack-simple 模板

webpack-simple 仅配置了 Babel 和 Vue 编译器，src 目录存放 Vue 代码源程序，五个模板构建出来的src目录都是一样的。只是在 webpack 模板中多了 components 目录，用于存放共用组件。目录结构和文件的组织应在开发前就进行约定。

规范约定

• 公共组件components、指令directives、过滤器filters将分别存放于src目录下
• 以使用场景命名Vue的页面文件
• 当页面文件具有私有组件、指令、过滤器时，建立与页面同名的目录，页面文件更名为index.vue，将页面与相关的依赖文件放在一起。
• 目录由全小写的名次、动名词、分词命名，两个以上次组成以-分割。
• Vue文件统一以大驼峰命名，仅入口文件index.vue采用小写。
• 测试文件一律以测试目标文件名.spec.js命名
• 资源文件一律以小写字符命名，两个以上的词组成以-分割。

约定

项目目录

webpack 模板

根目录

• build 存放用于编译用的webpack配置和相关辅助工具代码
• config 存放三大环境配置文件，用于设定环境变量和必要的路径信息。
• test 存放E2E测试与单元测试文件以及相关的配置文件
• static 存放项目所需要的其他静态资源文件
• dist 存放运行npm run build指令后的生产环境输出文件，可直接部署到服务器对应的静态资源目录内，该文件夹只有在运行build之后才会生效。

构建工具

开发、测试、生产三大运行环境都需要进行构建，针对不同环境要求，配置不同。

编译开发环境

# 在开发环境下加载运行Vue项目
$ cd projectName
$ npm run dev

该指令的配置是在package.json的script属性中设置的，实质是由npm来引导执行入口程序dev-server.js完成加载过程。

{
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
  },
}

加载过程

1. 加载环境变量
   从config目录加载index.js和dev.env.js模块，准备开发调试环境所必须的目录和全局变量。

加载环境变量

2. 合并webpack配置

在 build 目录下有三个 webpack 的配置文件

webpack配置文件

• webpack.base.conf.js 公用基本webpack配置
• webpack.dev.conf.js 开发环境专用的webpack配置
• webpack.prod.conf.js 生产环境专用webpack配置

使用webpack-merge的包来进行两个webpack配置之间的合并，此环境是通过将这个包将webpack.base.conf.js和webpack.dev.conf.js合并成最终的webpack配置。

3. 配置热加载

热加载启动后当开发环境被启动并进入调试模式后，一旦修改任何源代码，浏览器中对应内容会被自动刷新，而无需手工对浏览器进行刷新。

上阶段合并的webpack配置也是通过此环境被动态加载的，当代码文件发生变化，热加载就会启动webpack进行重新编译，然后将最新的编译文件重新加载到浏览器中。

4. 配置代理服务器

为代码增加一个模拟的服务端，可在无后盾程序支持时，直接模拟远程服务器执行请求的效果。

5. 配置静态资源

将图片、字体、样式表、编译后的JS脚本等，生成对应的印记（Footprint）并存放到由开发服务器托管的static虚目录中，使得浏览器正常访问这些资源。每个生成的文件印记是一些哈希代码，当文件内容发生变化时，哈希代码会发生改变。使用印记是将静态文件发布到CDN或进行离线缓冲时通知浏览器文件是否发生改变的重要依据。

6. 加载开发服务器

启动一个Express的Web服务器，将各个环境中配置好的模块进行加载，并程序能通过浏览器进行访问。

编译生产环境

$ npm run build

生产环境的构建，首先对必要资源文件进行打包加上印记，然后对脚本进行编译、压缩、包大小分割。

工程配置

webpack是一个模块打包的工具，作用是把相互依赖的模块处理成静态资源。

webpack模块打包

webpack的目标是

• 将依赖树按需分割
• 将初始加载时间控制在较低水平
• 每个静态资源都应成为一个模块
• 将第三方库继承到项目中形成一个模块
• 定制模块打包器的每个部分
• 适用于大型项目

webpack的特点

• 代码分割

在webpack的依赖树中有2中类型的依赖：同步依赖、异步依赖。异步依赖会成为一个代码分割点，并组成新代码块。在代码块组成的树被优化之后，每个代码块都会保存在一个单独的文件中。

• 加载器

webpack 原生只能处理js，加载器的作用是把其他代码转换成js代码，如此一来所有种类的代码都能组成一个模块。也就是说，在代码内可通过import将webpack打包的资源以模块的方式引入到程序中。

vue中常用加载器，以NPM库形式提供。

• vue-loader 加载与编译*.vue文件

• vue-style-loader 加载*.vue文件中的样式

• style-loader 将样式插入到页面的<style>标签内

• css-loader 加载*.css样式表文件

• less-loader 加载与编译*.less文件

• babel-loader 将ES6编译成浏览器兼容的ES5

• file-loader 直接加载文件

• url-loader 加载URL指定的文件，多用于字体和图片的加载。

• json-loader 加载*.json文件为JS实例

• 智能解析

webpack智能解析器能处理第三方库，允许依赖中出现表达式。

require("./components/"+name+".vue")

• 插件系统

基本用法

webpack 打包依赖配置文件webpack.config.js，此配置文件可以指定所有在源代码编译过程中的工作。

• 样式表的引用

希望某些页面或组件在应用时才自动加载特定的样式

import Vue from 'vue'
//引用指定的样式源文件
import './app/assets/less/dark.less'
export default {

}

在 webpack 的配置中加入 less-loader，webpack在打包是会自动将less转换为CSS，并将CSS动态代码生成到JS文件中。当Vue组件被加载到页面并实例化后，将在DOM内插入此特定行内样式<style>以实现动态样式的应用。

对于*.css同样是适用，如导入第三方库中必需的样式表。

import 'uikit/dist/css/components/tabs.css'

• 字体的引用

以前在样式表中先定义好字体样式并指定加载位置，然后页面引用样式表。使用webpack后，在配置文件内加入一个url-loader。

{
  test:/\.(woff2?|eot|ttf|otf)(\?,*)/,
  loader:'url'
}

• 使用别名取代路径引用

• 配置多入口程序

前后台需要多个与main.js类似的程序入口

#build/webpack.base.conf.js
module.exports = {
  entry:{
    app:'./src/main.js',
    admin:'./src/admin.js'
  }
}

vue-cli的webpack模板使用HtmlWebpackPlugin插件，生成HTML入口页面并自动将生成后的JS文件和CSS文件的引用地址写入到页面内人<script>标签中。这就需要在build/webpack.dev.config.js文件内的plugins配置项内多配置一个HtmlWebpackPlugin插件，用于生成admin.html入口页。

# build/webpack.dev.config.js
plugins:[
  
]