共计 3052 个字符，预计需要花费 8 分钟才能阅读完成。
前端畛域框架百花齐放，各种优良框架呈现（react，Vue，ag）等等框架。为了不便开发者疾速开发，开发对应的 cli 脚手架，来进步产出。然而初中级的前端工程师对我的项目里的 webpack 封装和配置理解的不分明，就容易导致出问题不知如何解决，甚至不会通过 webpack 去扩大新性能，对 webpack + vue 我的项目到底是怎么搭建起来的感到一脸困惑，上面咱们就来解决这个问题，揭开 webpack 构建 vue 的面纱。
什么是 webpack ?
酷炫动画的页面，高度简单的页面性能，页面内容反对预加载 (图片、骨架屏)，这些高要求导致了我的项目的减少更多的代码。代码的增多，使得由来代码须要被组织的需要，由此产生了模块化。
模块化的倒退历程
传统的 <script> 标签，一个标签加载一个 js 文件。毛病就是全局变量太多，容易呈现抵触，另外依赖程序很重要，太多 js 不好治理。前面呈现了 node.js，有了 CommonJS 标准（同步的 require 申请），即一个模块是一个文件，想用谁间接 require 谁，想被谁用，就 module.exports 导出去。
尽管服务端应用起来不便，然而浏览器通过网络申请获取文件是异步的，所以呈现了矛盾。为了解决 CommonJS 标准的缺点，AMD 标准（异步的 require 申请）呈现了，满足异步的网络申请，能够并行加载多个文件 ES6 modules，ES6 中自带对应的模块语法 input/exports，动态剖析容易。但浏览器反对度不够，模块较少。为此 webpack 呈现解决上述遇到的问题。
模块化的解决方案 – webpack
Webpack 是一个古代 JavaScript 应用程序的动态模块打包器 (module bundler)。在 webpack 中所有的文件都将被当做模块应用，当 webpack 解决应用程序时，它会递归地构建一个依赖关系图（dependency graph），其中蕴含应用程序须要的每个模块，而后将所有这些模块打包成一个或多个 bundle。举例：把你的我的项目当做一个整体，通过一个给定的主文件（如：mian.js）, webpack 将这个文件开始找到你我的项目的所以依赖文件，应用 loaders 或者是 plugins 去解决它们，最初打包成一个（或者多个）浏览器能够辨认的 JavaScript 文件。
webpack 的优缺点
先来看看 webpack 的 3 个长处：
- 模块化打包： 将 css，js，ts，sass 等对立转换为浏览器能够辨认的模式，并按需（压缩或不压缩）打包。
- webpack-plugin：webpack-plugin 是用来扩大 webpack 性能的插件，用来扩大 webpack 性能，并在整个构建过程中失效，执行相干工作。
- 按需加载： 代码中不须要的模块不被打进包里，或者按需加载。这是传统的流程构建工具，如 Gulp、Grunt 等所没方法实现的。
也不能漠视它的下列毛病：
- 传统技术开发的简单我的项目不实用： 一些比方 jquery，requirejs，seajs 等脚本模块化开发的简单我的项目我的项目，因为打包需要不稳固，webpack 保护老本极高。
- 侵入性较强： 应用 webpack 的我的项目，某些高级语法个性须要依赖独特语法实现，在肯定水平上属于面向 webpack 开发，须要肯定的学习老本。
- 兼容性问题：webpack 一贯是面对最新规范，本身的很多个性须要 polyfill 能力向下兼容，甚至有些个性最新浏览器还没有原生兼容，在做开发时候须要留神。
webpack 的构建流程
Webpack 的构建流程是一种事件流机制。整个构建流程能够看成是一个流水线，每个环节负责繁多的工作，解决完将进入下一个环节。
Webpack 会在每个环节上公布事件，供内置的和自定义的插件有机会干涉 Webpack 的构建过程，管制 Webpack 的构建后果
初始化参数： 从配置文件和 Shell 语句中读取与合并参数，得出最终的参数。
开始编译： 用上一步失去的参数初始化 Compiler 对象，加载所有配置的插件, 执行对象的 run 办法开始执行编译。确定入口：依据配置中的 entry 找出所有的入口文件。
编译模块： 从入口文件登程，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都通过了本步骤的解决。
实现模块编译： 在通过第 4 步应用 Loader 翻译完所有模块后，失去了每个模块被翻译后的最终内容以及它们之间的依赖关系。
输入资源： 依据入口和模块之间的依赖关系, 组装成一个个蕴含多个模块的 Chunk，再把每个 Chunk 转换成一个独自的文件退出到输入列表，这步是能够批改输入内容的最初机会。
输入实现： 在确定好输入内容后，依据配置确定输入的门路和文件名，把文件内容写入到文件系统。
相熟了 webpack 根本的构建流程那上面咱们就进行实际操作构建 vue 我的项目
webpack 构建 vue 我的项目
装置 webpack
应用版本：webpack5.x
新建 webpack-vue 我的项目，进入我的项目根目录，创立默认的 package.json
装置 webpack 和 webpack-cli：
- webpack – 模块打包库
- webpack-cli – 命令行工具
新建 src/main.js，外面轻易写点 console.log(‘hello,webpack-vue’)
result：
根底配置
新建一个 build 文件夹，新建一个 vue.config.js
Entry
入口文件，webpack 会首先从这里开始编译
Output
定义了打包后输入的地位，以及对应的文件名。[name] 是一个占位符
result：
plugins
当咱们构建我的项目时生成了 main.js 之后，须要一个 HTML 页面去展现，而后再 HTML 引入 JavaScript，当咱们配置打包输入的 bundle 文件都配置了随机 hash 值，每次手动插入和下一次更新就特麻烦，最好办法是每次构建实现后主动将新的 bundle 打包到 HTML 中并删除上一次旧的 bunble，所以咱们须要 html-webpack-plugin、clean-webpack-plugin 插件来帮咱们主动引入和删除历史 bundle 文件
根目录新建一个 public/index.html 默认模板
配置 vue.config.js
result：
loaders
webpack 辨认 css、sass 装置 loader，并将解析后的 css 插入到 index.html 外面的 style
result：
辨认压缩图片、字体
webpack 辨认图片、视频、字体、缩小图片字体等打包的大小。咱们能够应用 url-loader 将少于指定大小的文件转换为 base64，应用 file-loader 将大于指定大小的文件挪动到指定的地位
Babel
Babel 是一个 JavaScript 编译器，能将 ES6 + 代码转为 ES5 代码，让你应用最新的语言个性而不必放心兼容性问题，
在 Babel 执行编译的过程中，会从我的项目根目录下的配置文件读取配置。在根目录下创立 Babel 的配置文件 .babelrc
兼容 vue
- vue-loader
- vue-template-compiler
- vue-style-loader
src 文件夹内新建一个 APP.vue，内容自定义
热更新 HMR
配置 package.json
package.json：”dev”:”webpack serve –config build/vue.config.js”
result：
举荐浏览
go-zero：开箱即用的微服务框架
实操笔记：为 NSQ 配置监控服务的心路历程
