VUE笔记（一）--前端工程化与 webpack

一、前端工程化

• 模块化（js 的模块化、css 的模块化、资源的模块化）
• 组件化（复用现有的 UI 结构、样式、行为）
• 规范化（目录结构的划分、编码规范化、接口规范化、文档规范化、 Git 分支管理）
• 自动化（自动化构建、自动部署、自动化测试）

二、webpack的基本使用

1. 什么是 webpack

概念：webpack 是前端项目工程化的具体解决方案。

主要功能：它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端 JavaScript 的兼容性、性 能优化等强大的功能。

2. 创建列表隔行变色项目

1.  新建项目空白目录，并运行 npm init –y 命令，初始化包管理配置文件 package.json
2.  新建 src 源代码目录
3.  新建 src -> index.html 首页和 src -> index.js 脚本文件
4.  初始化首页基本的结构
5.  运行 npm install jquery –S 命令，安装 jQuery
6.  通过 ES6 模块化的方式导入 jQuery，实现列表隔行变色效果

3. 在项目中安装 webpack

在终端运行如下的命令，安装 webpack 相关的两个包：

npm install webpack@5.42.1 webpack-cli@4.7.2 -D

4. 在项目中配置 webpack

① 在项目根目录中，创建名为 webpack.config.js 的 webpack 配置文件，并初始化如下的基本配置：

module.exports = {
    mode: 'development' // mode 用来指定构建模式，可选值有 development 和 prodection
}

② 在 package.json 的 scripts 节点下，新增 dev 脚本如下：

"scripts": {
    "dev": "webpack" //script 节点下的脚本，可以通过 npm run 执行。例如 npm run dev
}

③ 在终端中运行 npm run dev 命令，启动 webpack 进行项目的打包构建

4.1 mode 的可选值

mode 节点的可选值有两个，分别是：

① development 

• 开发环境  
• 不会对打包生成的文件进行代码压缩和性能优化
• 打包速度快，适合在开发阶段使用

② production

• 生产环境
• 会对打包生成的文件进行代码压缩和性能优化  
• 打包速度很慢，仅适合在项目发布阶段使用

 4.2 webpack.config.js 文件的作用

webpack.config.js 是 webpack 的配置文件。webpack 在真正开始打包构建之前，会先读取这个配置文件， 从而基于给定的配置，对项目进行打包。

注意：由于 webpack 是基于 node.js 开发出来的打包工具，因此在它的配置文件中，支持使用 node.js 相关 的语法和模块进行 webpack 的个性化配置。

 4.3 webpack 中的默认约定

在 webpack 4.x 和 5.x 的版本中，有如下的默认约定：

1.  默认的打包入口文件为 src -> index.js
2.  默认的输出文件路径为 dist -> main.js

注意：可以在 webpack.config.js 中修改打包的默认约定

 4.4 自定义打包的入口与出口

在 webpack.config.js 配置文件中，通过 entry 节点指定打包的入口。通过 output 节点指定打包的出口。 示例代码如下：

const path = require('path') // 导入 node.js 中专门操作路径的模块

module.exports = {
    entry: path.join(__dirname, './src/index.js'), // 打包入口文件的路径
    output: {
        path: path.join(__dirname, './dist'), // 输出文件的存放位置
        filename: 'bundle.js' // 输出文件的名称
    }
}

三、webpack 中的插件

1. webpack 插件的作用

通过安装和配置第三方的插件，可以拓展 webpack 的能力，从而让 webpack 用起来更方便。最常用的 webpack 插件有如下两个：

① webpack-dev-server

• 类似于 node.js 阶段用到的 nodemon 工具
• 每当修改了源代码，webpack 会自动进行项目的打包和构建

② html-webpack-plugin

• webpack 中的 HTML 插件（类似于一个模板引擎插件）
• 可以通过此插件自定制 index.html 页面的内容

2. webpack-dev-server

webpack-dev-server 可以让 webpack 监听项目源代码的变化，从而进行自动打包构建。

 2.1 安装 webpack-dev-server

运行如下的命令，即可在项目中安装此插件： 

npm install webpack-dev-server@3.11.2 -D

 2.2 配置 webpack-dev-server

① 修改 package.json -> scripts 中的 dev 命令如下：

"scripts": {
    "dev": "webpack serve" //script 节点下的脚本，可以通过 npm run 执行。例如 npm run dev
}

② 再次运行 npm run dev 命令，重新进行项目的打包

③ 在浏览器中访问 http://localhost:8080 地址，查看自动打包效果

注意：webpack-dev-server 会启动一个实时打包的 http 服务器

 2.3 打包生成的文件哪儿去了？

① 不配置 webpack-dev-server 的情况下，webpack 打包生成的文件，会存放到实际的物理磁盘上

• 严格遵守开发者在 webpack.config.js 中指定配置
• 根据 output 节点指定路径进行存放

② 配置了 webpack-dev-server 之后，打包生成的文件存放到了内存中

• 不再根据 output 节点指定的路径，存放到实际的物理磁盘上
• 提高了实时打包输出的性能，因为内存比物理磁盘速度快很多

 2.4 生成到内存中的文件该如何访问？

webpack-dev-server 生成到内存中的文件，默认放到了项目的根目录中，而且是虚拟的、不可见的。

• 可以直接用 / 表示项目根目录，后面跟上要访问的文件名称，即可访问内存中的文件
• 例如 /bundle.js 就表示要访问 webpack-dev-server 生成到内存中的 bundle.js 文件

 3. html-webpack-plugin

html-webpack-plugin 是 webpack 中的 HTML 插件，可以通过此插件自定制 index.html 页面的内容。

需求：通过 html-webpack-plugin 插件，将 src 目录下的 index.html 首页，复制到项目根目录中一份！

 3.1 安装 html-webpack-plugin

运行如下的命令，即可在项目中安装此插件： 

npm install html-webpack-plugin@5.3.2 -D

 3.2 配置 html-webpack-plugin

// 1. 导入 HTML 这个插件，得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin');

// 2. 创建HTML插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定要复制哪个页面
    template: './src/index.html',
    // 指定复制出来的文件名和复制路径
    filename: './index.html'
});

module.exports = {
    // 代表 webpack 运行的模式 可选只有两个 development 和 production
    // 结论：开发的时候一定要用 development 因为追求的是打包速度，而不是体积
    // 反过来，发布上线的时候一定要用 production，因为上线追求的是速度，而不是打包速度快
    mode: 'development',
    plugins: [htmlPlugin] // 3. 插件的数组，将来 webpack 在运行时，会加载并调用这些插件
}

3.3 解惑 html-webpack-plugin

① 通过 HTML 插件复制到项目根目录中的 index.html 页面，也被放到了内存中

② HTML 插件在生成的 index.html 页面，自动注入了打包的 bundle.js 文件

 4. devServer 节点

在 webpack.config.js 配置文件中，可以通过 devServer 节点对 webpack-dev-server 插件进行更多的配置， 示例代码如下：

 devServer: {
    // 首次打包成功后，自动打开浏览器
    open: true,
    // 在HTTP协议中，如果端口号是80，则可以被省略
    port: 80,
    // 指定运行的主机地址
    host: '127.0.0.1'
}

注意：凡是修改了 webpack.config.js 配置文件，或修改了 package.json 配置文件，必须重启实时打包的服 务器，否则最新的配置文件无法生效！

四、 webpack 中的 loader

1. loader 加载器的作用：

协助 webpack 打包处理特定的文件模块。比如：

• css-loader 可以打包处理 .css 相关的文件  
• less-loader 可以打包处理 .less 相关的文件
• babel-loader 可以打包处理 webpack 无法处理的高级 JS 语法

2. loader 的调用过程 

 

 3. 打包处理 css 、less、url路径相关的文件

① 运行 npm i style-loader@3.0.0 css-loader@5.2.6 -D 命令，安装处理 css 文件的 loader

    运行 npm i less-loader@10.0.1 less@4.1.1 -D 命令

    运行 npm i url-loader@4.1.1 file-loader@6.2.0 -D 命令

② 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

module: {
    rules: [
        // 定义了不同模块对应的loader
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        // 处理 .less 文件的 loader
        { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
        // 处理图片文件的 loader
        // 如果需要调用的 loader 只有一个，则只传递一个字符串也行，如果有多个 loader，则 
        必须是指定数组
        // 在配置 babel-loader 的时候，多个参数之间，使用 & 符号分隔
        { test: /\.jpg|png|gif$/, use: 'url-loader?limit=470&outputPath=images' }
    ]
}

其中，test 表示匹配的文件类型， use 表示对应要调用的 loader

注意：

• use 数组中指定的 loader 顺序是固定的
• 多个 loader 的调用顺序是：从后往前调用

其中处理 url 路径中 ? 之后的是 loader 的参数项：

• limit 用来指定图片的大小，单位是字节（byte）  
• 只有 ≤ limit 大小的图片，才会被转为 base64 格式的图片

 4. 打包处理 js 文件中的高级语法

webpack 只能打包处理一部分高级的 JavaScript 语法。对于那些 webpack 无法处理的高级 js 语法，需要借 助于 babel-loader 进行打包处理。例如 webpack 无法处理下面的 JavaScript 代码：

// 定义装饰器函数
function info(target) {
    target.info = 'Person info'
}

// 定义一个普通类
@info
class Person {}

console.log(Person.info);

 6.1 安装 babel-loader 相关的包

运行如下的命令安装对应的依赖包：

npm i babel-loader@8.2.2 @babel/core@7.14.6 @babel/plugin-proposal-decorators@7.14.5 -D

 在 webpack.config.js 的 module -> rules 数组中，添加 loader 规则如下：

// 使用 babel-loader 处理高级的 JS 语法
// 在配置 babel-loader 的时候，程序员只需要把自己的代码进行转换即可，一定要排除 node_modules 目录中的 JS 文件
// 因为第三方包中的 JS 兼容性，不需要程序员关心
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }

 6.2 配置 babel-loader

在项目根目录下，创建名为 babel.config.js 的配置文件，定义 Babel 的配置项如下：

module.exports = {
     声明 babel 可用的插件
    plugins: [htmlPlugin, { legacy: true }]
}