vue构建流程
安装vue
npm install vue
安装vue-cli
npm install vue-cli
创建一个基于webpack模板的新项目
vue init webpack my-project
进行一些配置：如是否用eslint 作者邮箱 项目描述等
进入项目中,安装并执行
cd my-project
npm install
npm run dev
然后去配置自己项目相应的webpack(主要是生产环境和开发环境的配置、css图片等一些静态资源的配置、及安装一些插件)、nodejs、分配一下目录结构，.json文件中nodejs配置、入口文件main.js、app.vue等、需要什么插件能够更快速的开发，那么就去找到它的官网按照步骤安装、在查看其示例写入就可以了，其他就是在项目开发中具体问题再具体分析解决
项目结构
├── 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 */ // /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") // 项目中的配置文件，来源：/content-4-681651.html
