Webpack | 😈Zabanya’s Blog

一、组件化开发

（一）组件命名方式

短横线分隔符：'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 ./build

2️⃣ 在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-D

~~npm 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 -D

4. 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

单独配置文件如下：