Vue 与 Webpack 集成

Vue-loader

vue-loader是用于加载 *.vue 文件的 Webpack loader，是目前最方便的将 Vue 与 Webpack 集成的方式。

*.vue文件是用户用 HTML-like 的语法编写的 Vue 组件。每个*.vue文件都包括三部分<template>,<script>和<style>。

vue-loader解析文件，提取每个语言块，让他们通过需要的其他 loaders ，最后组装起来，放回 CommonJS 的模块，此模块的module.exports就是个 Vue.js 组件对象。

vue-loader默认用没有用语言编译器，想CSS 预编译和HTML模板编译语言等，如果想用这些功能，需要设置lang属性的来实现。例如，你可以在组件的样式中这样用 SASS ：

<style lang="sass">
  /* 编写 SASS! */
</style>

Vue-loader 支持的特性：

Webpack 配置

Vue 与 Webpack 的配合使用是非常强大的，最简单的方式是通过 vue-cli 生成项目：

vue init webpack helloworld

生成后的项目里的 build 目录和 config 目录下包含了所需的 webpack 配置的文件。

├── build
|   ├── build.js          
|   ├── check-version.js
|   ├── dev-client.js
|   ├── dev-server.js
|   ├── utils.js
|   ├── vue-loader.conf.js
|   ├── webpack.base.conf.js
|   ├── webpack.dev.conf.js
|   └── webpack.prod.conf.js
├── config
│   ├── dev.env.js
│   ├── index.js
│   └── prod.env.js
├── ...
└── package.json

指令分析

"scripts": {
  "dev": "node build/dev-server.js",
  "start": "npm run dev",
  "build": "node build/build.js",
  "lint": "eslint --ext .js,.vue src"
}

除了 lint 外其实只有两条配置，dev 和 build，dev 执行 dev-server.js， build 执行 build.js。

build 文件夹分析

build/dev-server.js

该文件主要完成下面几件事情：

  1. 检查 node 和 npm 的版本
  2. 引入相关插件和配置
  3. 创建 express 服务器和 webpack 编译器
  4. 配置开发中间件 webpack-dev-middleware 和热重载中间件 webpack-hot-middleware
  5. 挂载代理服务和中间件
  6. 配置静态资源
  7. 启动服务器监听特定端口（8080）
  8. 自动打开浏览器并打开特定网址（localhost:8080）

express 服务器提供静态文件服务，不过它还使用了 http-proxy-middleware 作为请求代理中间件。前端开发过程中需要使用到后台的 API 的话，可以通过配置 proxyTable 来将相应的后台请求代理到专用的 API 服务器。

build/webpack.base.conf.js

dev-server 使用的 webpack 配置来自 build/webpack.dev.conf.js 文件，而 build/webpack.dev.conf.js 中又引用了webpack.base.conf.js，该文件主要完成了下面这些事情：

  1. 配置 webpack编译入口
  2. 配置 webpack 输出路径和命名规则
  3. 配置模块 resolve 规则
  4. 配置不同类型模块的处理规则

这个配置里面只配置了.js、.vue、图片、字体等几类文件的处理规则，如果需要处理其他文件可以在 module.rules 里面配置。

build/webpack.dev.conf.js

在webpack.base.conf的基础上增加完善了开发环境下面的配置，主要包括下面几件事情：

  1. 将 hot-reload 相关的代码添加到 entry chunks
  2. 合并基础的 webpack 配置
  3. 使用 styleLoaders
  4. 配置 Source Maps
  5. 配置 webpack 插件

build/utils.js 和 build/vue-loader.conf.js

utils.js 主要完成下面3件事

  1. 配置静态资源路径
  2. 生成 cssLoaders 用于加载 .vue 文件中的样式
  3. 生成 styleLoaders 用于加载不在 .vue 文件中的单独存在的样式文件

vue-loader.conf 则只配置了 css 加载器以及 transformToRequire，用来在编译过程中将视频，图片等资源的 src 属性里的链接转换成 require 调用，以便目标资源可以被 Webpack 处理。

build/build.js

上面已经知道 npm run build 时会执行 build.js，build.js主要完成下面几件事：

  1. loading动画
  2. 删除创建目标文件夹
  3. webpack编译
  4. 输出信息

build/webpack.prod.conf.js

构建的时候用到的 webpack 配置来自 webpack.prod.conf.js，该配置同样是在 webpack.base.conf 基础上的进一步完善。主要完成下面几件事情：

  1. 合并基础的 webpack 配置
  2. 使用 styleLoaders
  3. 配置 webpack 的输出
  4. 配置 webpack 插件
  5. gzip 模式下的 webpack 插件配置
  6. webpack-bundle 分析

build/check-versions.js 和 build/dev-client.js

check-version.js 完成对 node 和 npm 的版本检测，dev-client.js 引入 webpack-hot-middleware 实现热加载，只在 webpack.dev.conf.js 中被添加至 entry 配置中。

config 文件夹分析

config/index.js

该文件描述了开发和构建两种环境下的配置。

results matching ""

    No results matching ""