一、组件化开发
（一）组件命名方式
短横线分隔符：'my-component-name'
驼峰标识符：'MyComponentName'
（二）注册全局组件
使用
app.component() 方法注册全局组件二、webpack 基础
（一）安装方式
全局安装webpack：
npm install webpack webpack-cli -g
局部安装webpack：npm init 👉 npm install webpack --save-dev即
--save-dev 缩写为 -D，意思是开发依赖、不加 -D 即生产依赖；⚠️ 打包时使用局部webpack
1️⃣
npx webpack --entry ./src/main.js --output-path ./build2️⃣ 在package.json 中 scripts属性下加入
"build": "webpack --config main.js" （然后具体配置如下webpack.config.js） ✅（二）常用资源
1. CSS loader和其他样式
npm install css-loader -D使用方式：
1、内联方式：import "css-loader!+路径" ❌不建议
2、模块配置：webpack.config.js中加入module模块 ✅
2. PostCSS（不同浏览器适应）【独立工具】
npm install postcss postcss-cli postcss-loader-Dnpm install autoprefixer -D目前通常由 postcss-preset-env 取代 autoprefixer ⭕
npx postcss --use autoprefixer -o end.css【输出文件名】 ./src/css/style.css【输入文件名】3. file-loader × url-loader
🔻 file-loader
备注：图片资源需要用import导入。例如：import zzhnImage form '../img/zznh.png'
🔻 url-loader
将较小的文件转化成base64URI（对高并发性能优化）
安装：
npm install url-loader -D4. asset module type(Webpack 5)
webpack5中用以 代替 上述file-loader 和 url-loader
5. 字体打包
6. 插件Plugin
6.1 每次打包删除dist文件插件
安装：
npm install clean-webpack-plugin -D使用：
6.2 对 HTML进行打包
安装：
npm install html-webpack-plugin -D使用：
6.3 CopyWebpackPlugin
在vue的打包过程中，如果我们将一些文件放到public的目录下，那么这个目录会被复制到dist文件夹中。这个复制的功能，我们可以使用CopyWebpackPlugin来完成
安装：
npm install copy-webpack-plugin -D使用：
7. Babel【独立工具】
Babel可以视为编译器，例如将ES6代码转换为ES5
安装：
npm install @babel/cli @babel/core -D使用：
npx babel xxx.js --out-dir 文件夹名npx babel xxx.js --out-file 文件名通常而言，一个babal不同语法的转换需要不同的插件，所以当转换内容过多，推介使用预设，其 安装 如下：
npm install @babel/present-env -D使用：
npx babel xxx.js --out-file xxx.js --presets=@babel/preset-env在 Webpack中使用：
而且，可以将babel抽取到一个文件夹中babel.config.js
8. vue相关插件单独安装
安装：
vue版本分为两类：其一runtime+compiler；其二runtime-only（默认）
备注：含有runtime则不包含compiler，不能对template解析；含有prod是生产版本，代码有压缩
编译时需要安装以下插件：
npm install @vue/compiler-sfc -D使用：Webpack.config.js
Bundler Build Feature Flags
其中有两个可选属性：
1️⃣ __VUE_OPTIONS_API__：对Vue2适配（默认是true）,例如
setup(){ ... }，而且当设置为false时，可以tree shaking减少部分代码2️⃣ __VUE_PROD_DEVTOOLS__：Vue调试工具是否在生产环境生效（默认是false）
⭐ 这两个属性在DefinePlugin中配置：
所以，综上所述：如果是完全使用.vue文件（sfc文件）开发，则不需要使用：
import { createApp } from 'vue/dist/vue.esm-bundler'可以直接写成，因为这些文件都交由vue-loader中的compiler-sfc解析：
import { createApp } from 'vue'（三）Webpack搭建本地服务
通产来说，运行代码需要以下两个步骤：
1️⃣ npm run build
2️⃣ live server / 浏览器
但是为了提高效率，需要自动完成编译和展示，而webpack给我们提供以几种方式：
1. watch
在package.json中修改
或者在webpack.config.js中修改
2. dev-serve
webpack自带的live reloading(实时重新加载)，其实质上时调用memfs库，在编译后不会写入到任何输出文件，而是将bundle文件保留在内存中，安装如下：
npm install webpack-dev-server -D配置如下：在package.json插入如下代码：
详细配置信息：
（四）模块热替换(HMR)
HMR的全称是Hot Module Replacement，翻译为模块热替换；
模块热替换是指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面
原理：
webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）
1️⃣ express server 负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）；
2️⃣ HMR Socket Server，是一个socket的长连接：
- 长连接有一个最好的好处是建立连接后双方可以通信（服务器可以直接发送文件到客户端）；
- 当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）
- 浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新
（五）项目网络设置hotOnly、host
具体设置：
（六）Proxy
proxy主要用于解决跨域问题；
首先需要安装axios库
npm install axios使用：
（七）resolve
resolve用于设置模块如何被解析：
在开发中我们会有各种各样的模块依赖，这些模块可能来自于自己编写的代码，也可能来自第三方库；
resolve可以帮助webpack从每个require / import 语句中，找到需要引入到合适的模块代码；
webpack 使用 enhanced-resolve 来解析文件路径；
匹配/解析顺序：
相关配置：
（八）dev和build模式配置分离
创建config文件夹分别是公共文件夹 webpack.comm.config.js，生产文件夹 webpack.dev.config.js，发布文件夹 webpack.prod.config.js；
然后我们需要将comm.js合并到不同两个环境中，需要安装以下插件
npm install webpack-merge -D单独配置文件如下：
- 作者:😈Zabanya
- 链接:https://blog.zabanya.space//article/2092c7ff-ba25-496f-b22c-da53438440cf
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处