vue-cli是怎么构建打包工程的
2018-09-10 本文已影响125人
LIT乐言
项目结构
├── build --------------------------------- webpack相关配置文件
│ ├── build.js --------------------------webpack打包配置文件
│ ├── check-versions.js ------------------------------ 检查npm,nodejs版本
│ ├── logo.png ---------------------------------- 项目 logo
│ ├── utils.js --------------------------------------- 配置资源路径，配置css加载器
│ ├── vue-loader.conf.js ----------------------------- 配置css加载器等
│ ├── webpack.base.conf.js --------------------------- webpack基本配置
│ ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置
│ ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置
├── config ---------------------------------- 配置文件
├── index.js ------------------------------ 开发和生产环境配置文件
├── node_modules ---------------------------- 存放依赖的目录
├── src ------------------------------------- 源码
│ ├── assets ------------------------------ 静态文件
│ ├── components -------------------------- 组件
│ ├── main.js ----------------------------- 主js
│ ├── App.vue ----------------------------- 项目入口组件
│ ├── router ------------------------------ 路由
├── package.json ---------------------------- node配置文件
├── .babelrc--------------------------------- babel配置文件
├── .editorconfig---------------------------- 编辑器配置
├── .gitignore------------------------------- 配置git可忽略的文件
webpack配置划重点
在看项目配置文件之前，我们先了解下 webpack 几个常用的工具和插件，如果你已经十分熟悉，你可以跳过这一小节，直接去看，配置文件解析
1. path模块
path 是 node.js 中的一个模块，用于处理目录的对象，提高开发效
常用方法：
path.join(): 用于连接路径。该方法的主要用途在于，会正确使用当前系统的路径分隔符，Unix 系统是 ”/“，Windows系统是 ”\“
path.resolve() 用于将相对路径转为绝对路径
常使用的文件路径
__dirname: 总是返回被执行的 js 所在文件夹的绝对路径
__filename: 总是返回被执行的 js 的绝对路径
process.cwd(): 总是返回运行 node 命令时所在的文件夹的绝对路径
2.process
process对象是Node的一个全局对象，提供当前Node进程的信息。
process 对象提供一系列属性，用于返回系统信息
process.argv：返回当前进程的命令行参数数组。
process.env：返回一个对象，成员为当前Shell的环境变量，比如process.env.HOME
process.pid：当前进程的进程号
3.Source map
简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，debug 工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。webpack 的 devtool里有 7种 SourceMap 模式
| 模式 | 解释 |
|---|---|
| eval | 每个 module 会封装到 eval 里包裹起来执行，并且会在末尾追加注释 //@ sourceURL |
| source-map | 生成一个 SourceMap 文件. |
| hidden-source-map | 和 source-map 一样，但不会在 bundle 末尾追加注释. |
| inline-source-map | 生成一个 DataUrl 形式的 SourceMap 文件. |
| eval-source-map | 每个 module 会通过 eval() 来执行，并且生成一个 DataUrl 形式的 SourceMap . |
| cheap-source-map | 生成一个没有列信息（column-mappings）的 SourceMaps 文件，不包含 loader 的 sourcemap（譬如 babel 的 sourcemap） |
| cheap-module-source-map | 生成一个没有列信息（column-mappings）的 SourceMaps 文件，同时 loader 的 sourcemap 也被简化为只包含对应行的。 |
4. webpack-merge
开发环境(development)和生产环境(production)的构建目标差异很大。在开发环境中，我们需要具有强大的、具有实时重新加载(live reloading)或热模块替换(hot module replacement)能力的 source map 和 localhost server。而在生产环境中，我们的目标则转向于关注更小的 bundle，更轻量的 source map，以及更优化的资源，以改善加载时间。由于要遵循逻辑分离，我们通常建议为每个环境编写彼此独立的 webpack 配置。通用的配置部分，我们抽象出一个公共文件，通过webpack-merge 工具的“通用”配置，我们不必在环境特定的配置中重复代码。
5. ExtractTextWebpackPlugin
ExtractTextWebpackPlugin 插件通常用来做样式文件的分离，被分离的文件不会被内嵌到 JS bundle 中，而会被放到一个单独的文件中，在样式文件比较大的时候，能够提前样式的加载,配置示例如下
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
}]
},
plugins: [
new ExtractTextPlugin("styles.css"),
]
}
它会将所有的入口 chunk(entry chunks)中引用的 *.css，移动到独立分离的 CSS 文件。因此，你的样式将不再内嵌到 JS bundle 中，而是会放到一个单独的 CSS 文件（即 styles.css）当中。 如果你的样式文件大小较大，这会做更快提前加载，因为 CSS bundle 会跟 JS bundle 并行加载。
6.html-webpack-plugin
如果你有多个 webpack 入口点， 他们都会在生成的HTML文件中的 script 标签内。如果你有任何 CSS assets 在 webpack 的输出中（例如， 利用ExtractTextPlugin提取CSS）， 那么这些将被包含在HTML head中的标签内。通常在开发中，我们为了避免 CDN 和浏览器的缓存通常会个输出文件 bundle.js 加上一个hash 值例如 [hash].bundle.js，使用 html-webpack-plugin 能够在创建新的 html 文件的时候将我们把带有哈希值的 bundle.js 引用到 html 文件.
7.optimize-css-assets-webpack-plugin
用来优化从脚本里提炼出来的 css ，配置示例如下
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}
]
},
plugins: [
new ExtractTextPlugin('styles.css'),
new OptimizeCssAssetsPlugin({
assetNameRegExp: /\.optimize\.css$/g,
cssProcessor: require('cssnano'),
cssProcessorOptions: { discardComments: { removeAll: true } },
canPrint: true
})
]
};
8.CopyWebpackPlugin
CopyWebpackPlugin从插件名称上我们不难看出他的作用，通常用来拷贝资源，对项目文件进行归类整合
9.friendly-errors-webpack-plugin
friendly-errors-webpack-plugin能够更好在终端看到webapck运行的警告和错误，提高开发体验
10.UglifyjsWebpackPlugin
UglifyjsWebpackPlugin用来压缩 js 代码
11.开发中 Server(DevServer)
webpack 项目服务，我们通常会在开发阶段用来配置项目的热刷新，服务压缩，项目代理等，常用的几个配置参数介绍如下
const config = require('../config')
// config 文件里做了用户自定的服务参数配置
devServer: {
clientLogLevel: 'warning', // 在开发攻击的控制台中显示信息，便于开发调试，你可以将参数配置成 "none" 来进行关闭
historyApiFallback: { // 当使用 HTML5 History API 时，任意的 404 响应都可能需要被替代为 index.html
rewrites: [
{ from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
],
},
hot: true, //启用项目的热刷新，即模块热替换特性
contentBase: false, // 告诉服务器从哪里提供内容。只有在你想要提供静态文件时才需要。这里禁用，因为配置了 CopyWebpackPlugin 的使用
compress: true,
host: HOST || config.dev.host, //指定使用一个域名。默认是 localhost
port: PORT || config.dev.port, //指定要监听请求的端口号：
open: config.dev.autoOpenBrowser, //open 参数配置，如果配置成 true ，项目启动后会自动打开浏览器
overlay: config.dev.errorOverlay //当有错误或则警告的时候在页面上显示一个全屏的遮罩提示
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath, //此路径下的打包文件可在浏览器中访问
proxy: config.dev.proxyTable, //代理API的请求
quiet: true, //启用 quiet 后，除了初始启动信息之外的任何内容都不会被打印到控制台,特别是使用了 FriendlyErrorsPlugin 插件的时候
watchOptions: { //与监视文件相关的控制选项。是否使用轮询
poll: config.dev.poll,
}
},
配置文件解析
通过了解了上面的配置，我们应该对 webpack 的常用插件和工具有了一定了解，我们来看下 vue-cli 脚手架给我们生成的配置情况
config.js
'use strict'
const path = require('path') // 引用项目的 path 模块
module.exports = {
dev: {
// 路径配置
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {},
// 各种开发服务配置
host: 'localhost', // 开发环境域名 可以被 node 全局变量process.env.HOST 重写
port: 8080, //配置开发服务端口，可以被 node 全局变量 process.env.PORT 重写, 需要使用未被占用的端口
autoOpenBrowser: false, //服务启动是否自动代开浏览器
errorOverlay: true, //是否在发生错误的时候，在页面整屏增加一个错误遮罩
notifyOnErrors: true, //是否通知错误 ，在我们的项目配置中和 friendly-errors-webpack-plugin 结合使用
poll: false, // 服务监听是否轮询操作
// 配饰是否使用 Eslint Loader 进行语法检测
// 如果使用，在开发构建阶段，会对你的代码会进行检测
// 检测出来的警告和错误会白展示在开发工具的控制台
useEslint: true, //进行语法检测
// 配置是否将 eslint 语法检测的警告和错误展示在页面整屏的遮罩上
showEslintErrorsInOverlay: false, // 语法检测的警告和错误不展示在遮罩上
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
// 在上面的介绍中，我们知道 source map 是用来将我们构建后被转化的代码对应构建前的代码，便于 debug
// cheap-module-eval-source-map 和我们介绍的 cheap-module-source-map 很类似，但是 SourceMap 会被作为数据添加到包中
devtool: 'cheap-module-eval-source-map',
// 如果你的开发工具不能进行 vue-files 的 debug ，可以将以下设置设置成 false
cacheBusting: true,
cssSourceMap: true
},
build: {
// index.html 文件模板
index: path.resolve(__dirname, '../dist/index.html'),
// 打包路径配置
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
/**
* Source Maps
*/
//生产环境 source map 配置
productionSourceMap: true,
devtool: '#source-map',
// 因为很多的主流服务都会 通过 gzip 压缩过你的所有静态资源，我们的配置默认不开启 gzip
// 如果要设置成开启,请先确保已经安装好 compression-webpack-plugin 插件
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// 启动 build 命令的时候，额外添加一个参数，打包后会自动生成一个分析报告文件，例如 npm run build --report ，可以通过配置 true ，false 来关闭
bundleAnalyzerReport: process.env.npm_config_report
}
}
check-versions.js
这个文件主要是用来检测当前环境中的node和npm版本和我们需要的是否一致的。
'use strict'
const chalk = require('chalk') // 改变命令行中的字体颜色，大致这样用chalk.blue('Hello world')
const semver = require('semver') //是用来对特定的版本号做判断的
const packageConfig = require('../package.json') // 项目 npm 配置文件，获取依赖及版本信息，requrie返回的就是json对象
const shell = require('shelljs') //用来执行Unix系统命令，调用系统命令更加方便
//把cmd这个参数传递的值转化成前后没有空格的字符串，也就是版本号
function exec (cmd) {
return require('child_process').execSync(cmd).toString().trim()
}
const versionRequirements = [
{
name: 'node',
currentVersion: semver.clean(process.version), // 提取进程版本信息转化成规定格式，也就是 ' =v1.2.3 ' -> '1.2.3' 这种功能
versionRequirement: packageConfig.engines.node // package.json 的 node 的版本信息
}
]
if (shell.which('npm')) {
versionRequirements.push({
name: 'npm',
currentVersion: exec('npm --version'), //当前的版本信息
versionRequirement: packageConfig.engines.npm //package.json 的 node 的版本信息
})
}
module.exports = function () {
const warnings = []
for (let i = 0; i < versionRequirements.length; i++) {
const mod = versionRequirements[i]
// 如果当前版本号不符合 package.json 要求的版本号，红色表示当前版本信息，绿色表示要求的版本信息，添加到 warnings 待输出
if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
warnings.push(mod.name + ': ' +
chalk.red(mod.currentVersion) + ' should be ' +
chalk.green(mod.versionRequirement)
)
}
}
//输出版本号不相符的提示 warnings
if (warnings.length) {
console.log('')
console.log(chalk.yellow('To use this template, you must update following to modules:'))
console.log()
for (let i = 0; i < warnings.length; i++) {
const warning = warnings[i]
console.log(' ' + warning)
}
console.log()
process.exit(1)
}
}
build.js
'use strict'
//打包前判断当先开发环境的 node 和 npm 版本和 package.json 要求的时候一样
require('./check-versions')()
process.env.NODE_ENV = 'production'
const ora = require('ora') // 在用户打包的时候能够让用户知道正在进行，一个加载中的样式，转啊转
const rm = require('rimraf') //这个模块是用来清除之前的打的包，因为在vue-cli中每次打包会生成不同的hash
const path = require('path') //node 路径模块，便于我们操作文件路径
const chalk = require('chalk') //带颜色的输出模块，能在控制台中输出不同的样色
const webpack = require('webpack') //webpack 不解释
const config = require('../config') // 项目中的配置文件，
