前端构建

1 培训简介

1.1 内容

了解vue前端构建，如何生成生产环境下的前端代码（如何出包、生成自定义控件、自定义按钮的运行端等）。

1.2 目标

1.了解构建的功能，知道哪些东西能放入到构建中去做。

2.了解脚手架cli3的基础功能。

3.了解代理，能够本地前后端分离开发。

2 Webpack

2.1 Webpack基本概念

Webpack 本质上是一个打包工具，它会根据代码的内容解析模块依赖，帮助我们把多个模块的代码打包。下面是Webpack官网给的一个说明图。

如上图，webpack 会把项目中使用到的多个代码模块（可以是不同文件类型），打包构建成项目运行仅需要的几个静态文件（如.js、.css等）。

2.2 详细说明

Webpack 是一个前端资源加载和打包工具。所谓的模块就是在平时的前端开发中， 用到一些静态资源，如JavaScript、CSS、图片等文件，webpack就将这些静态资源文件称之为模块。 webpack支持AMD和CommonJS，以及其他的一些模块系统，并且兼容多种JS书写规范， 它能对静态资源进行统一的管理以及打包发布。

Webpack受到大多数前端开发者的喜爱，因为它能够编译打包CSS，做CSS预处理， 对JS的方言进行编译，打包图片，代码压缩，混淆等等。

与其他的构建工具相比，Webpack具有如下的一些优势：

**1.对 CommonJS 、 AMD 、UMD 、ES6 的语法做了兼容； *2.对 js、css、图片等资源文件都支持打包； 3.串联式模块加载器以及插件机制，让其具有更好的灵活性和扩展性，例如提供对 CoffeeScript、ES6的支持； 4.有独立的配置文件 webpack.config.js； *5.可以将代码切割成不同的 chunk，实现按需加载，降低了初始化时间； 6.支持 SourceUrls 和 SourceMaps，易于调试； *7.具有强大的 Plugin 接口，大多是内部插件，使用起来比较灵活; 8.webpack 使用异步 IO 并具有多级缓存。这使得 webpack 很快且在增量编译上更加快。

PS: 一、CommonJS是一种后端js规范，是nodeJs遵循的一种编写js模块的规范，（是由nodejs将其发扬光大的），同时也开启了js全栈的大门。

此处主要用于webpack配置。

1、定义模块 根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性

2、模块输出： 模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象

3、加载模块： 加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象

// foobar.js
//私有变量
var test = 123;
 
//公有方法
function foobar () {
 
    this.foo = function () {
        // do someing ...
    }
    this.bar = function () {
        //do someing ...
    }
}
 
//exports对象上的方法和变量是公有的
var foobar = new foobar();
exports.foobar = foobar;

// test.js
//require方法默认读取js文件，所以可以省略js后缀
var test = require('./boobar').foobar;
 
test.bar();

二、 AMD 全称Asynchronous Module Definition 由于不是JavaScript原生支持，使用AMD规范进行页面开发需要用到对应的库函数，也就是大名鼎鼎RequireJS，AMD是 RequireJS 在推广过程中对模块定义的规范化的产出

requireJS主要解决两个问题

1、多个js文件可能有依赖关系，被依赖的文件需要早于依赖它的文件加载到浏览器 2、js加载的时候浏览器会停止页面渲染，加载文件越多，页面失去响应时间越长

requireJS的例子

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }
 
    return {
        printName: printName
    };
});
 
// 加载模块
require(['myModule'], function (my){
　 my.printName();
});

UMD：Universal Module Definition（通用模块规范）

由于CommonJS和AMD都十分流行，但似乎缺少一个统一的规范。于是，UMD(通用模块规范)出现了，它可以同时支持这两种风格。

虽然这个模式的写法比较难看，但是，它同时兼容了AMD和CommonJS，而且还支持老式的全局变量规范。

是由社区想出来的一种整合了CommonJS和AMD两个模块定义规范的方法

UMD = AMD + CommonJS

总结： 1.一切皆模块（核心） 正如js文件可以是一个“模块（module）”一样，其他的（如css、image或html）文件也可视作模 块。 因此，你可以require(‘myJSfile.js’)亦可以require(‘myCSSfile.css’)。 这意味着我们可以将事物（业务）分割成更小的易于管理的片段，从而达到重复利用等的目的。

2.按需加载（性能优化） 传统的模块打包工具（module bundlers）最终将所有的模块编译生成一个庞大的bundle.js文件。 但是在真实的app里边，“bundle.js”文件可能有10M到15M之大可能会导致应用一直处于加载中状态。 因此Webpack使用许多特性来分割代码然后生成多个“bundle”文件，而且异步加载部分代码以实现按需加载。

webpack 优化 https://www.jianshu.com/p/d2152789759d (opens new window)

2.3 简单入口配置

入口

每个应用程序都有自己的入口文件，而Webpack构建的项目的默认的入口文件就是“./src/main.js” 。

入口使用 entry 字段来进行配置，可以是个字符串或数组或者是对象；如果是数组，数组中的所有文件会打包生成一个filename文件；如果是对象，可以将不同的文件构建成不同的文件。例如：

loader

webpack 中提供一种处理多种文件格式的机制，便是使用 loader。我们可以把 loader 理解为是一个转换器，负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。

在webpack中JavaScript，CSS，LESS，TypeScript，JSX，CoffeeScript，图片等静态文件都是模块，不同模块的加载是通过模块加载器（webpack-loader）来统一管理的当我们需要使用不同的 loader 来解析处理不同类型的文件时，我们可以在 module.rules 字段下来配置相关的规则。例如使用 Babel 来处理 .js 文件。

plugin

在 webpack 的构建流程中，plugin 用于处理更多其他的一些构建任务。可以这么理解，模块代码转换的工作由 loader 来处理，除此之外的其他任何工作都可以交由 plugin 来完成。

webpack提供了“丰富的组件”来满足我们不同的需求，当然也可以自行实现一个组件来满足特定的需求。在webpack中，可以通过 plugins 字段来添加新的 plugin 。

输出

module.exports = {
  entry: './src/index.js' 
}

// 使用数组来对多个文件进行打包
module.exports = {
  entry: {
    main: [
      './src/foo.js',
      './src/bar.js'
    ]
  },
  rules: [ // loader
    {
      test: /\.jsx?/, // 匹配文件路径的正则表达式，通常我们都是匹配文件类型后缀
      include: [
        path.resolve(__dirname, 'src') // 指定哪些路径下的文件需要经过 loader 处理
      ],
      use: 'babel-loader', // 指定使用的 loader
    },
  ],
  plugins: [
    new UglifyPlugin() //新的plugin
  ],
  // ...
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
}

注：中文官网路径 https://www.webpackjs.com/ (opens new window)

3 vue 简化配置，cli3 脚手架

为了减少webpack的配置，cli3脚手架对webpack再次封装，简化了vue的webpack配置。

实际原理就是把复杂的webpack配置给出了一套完整的适用于vue工程的默认配置。

如果有修改，只需要进行微调即可。

1.工程目录

​ 参考demo工程。

2.css支持配置.browserslistrc ···

1% last 7 versions not ie <= 8 last 10 Chrome versions last 5 Firefox versions Safari >= 6 ···

3.vue.config.js是一个可选的配置文件，cli3已经存在了默认配置，我们只需要通过vue.config.js来微调配置即可。

{
    productionSourceMap: false, // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建
    assetsDir: "static", // dist下的静态资源目录
    publicPath: "./",
    configureWebpack: {
        plugins: [
            new DistInitPlugin()
        ],
        output: {
            filename: `static/js/[name].min.js?t=${version}`,
            chunkFilename: `static/js/[name].min.js?t=${version}`
        },
        resolve: {
            alias: alias
        }
    },
    outputDir: 'dist',
    devServer: devServer,
    pages: {
        index: 'src/main.js' // 入口
    }
}

productionSourceMap

Type: boolean

Default: true

如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。

publicPath

Type: string

Default: '/'

部署应用包时的基本 URL。Vue CLI 会假设你的应用是被部署在一个域名的根路径上，例如 https://www.my-app.com/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 (opens new window) https://www.my-app.com/my-app/，则设置 (opens new window) publicPath 为 /my-app/。

这个值也可以被设置为空字符串 ('') 或是相对路径 ('./')，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径，也可以用在类似 Cordova hybrid 应用的文件系统中。

outputDir

Type: string

Default: 'dist'

当运行 vue-cli-service build 时生成的生产环境构建文件的目录。注意目标目录在构建之前会被清除 (构建时传入 --no-clean 可关闭该行为)。

configureWebpack

配置输出细节、构建过程、等细节化调整。

devServer.proxy

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

devServer.proxy 可以是一个指向开发环境 API 服务器的字符串

下面就是本地代理到服务器 const proxySite = 'http://192.168.225.70:88 (opens new window)' // 主干 ··· { proxy: { '/seeyon': { target: proxySite, changeOrigin: false, pathRewrite: { '^/seeyon': '/seeyon' } } }, port: 8000 } ···

官网链接 https://cli.vuejs.org/zh/config/#vue-config-js (opens new window)

自定义命令

package.json 中的scripts，可以自己组合命名执行。

vue-cli-service build

如何构建库

用法：vue-cli-service build [options] [entry|pattern]

选项： --dest 指定输出目录 (默认值：dist) --target app | lib | wc | wc-async (默认值：app) --name 库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)

创建人：yinyanting

快速跳转

• 前端构建
  • 1 培训简介
    • 1.1 内容
    • 1.2 目标
  • 2 Webpack
    • 2.1 Webpack基本概念
    • 2.2 详细说明
    • 2.3 简单入口配置
      • 入口
      • loader
      • plugin
  • 3 vue 简化配置，cli3 脚手架
    • productionSourceMap
    • publicPath
    • outputDir
    • configureWebpack
    • devServer.proxy
    • 自定义命令
    • vue-cli-service build