《前端构建工具（webpack&vite）- 李立超》笔记

1. 构建工具简介

1.1 模块化

最初我们都使用script标签来引入js，但当一个页面引入的js文件越来越多时，就产生了几个难以避免的问题：

全局变量污染。
变量重名。
js之间的依赖关系复杂，无法保证顺序。

而模块化规范就是为解决以上问题，模块内部的变量实现了在其他模块内共享。而且可以指定哪些变量、类或者函数可以共享。
主流的模块化规范包括CommonJS、AMD、CMD、UMD和ESM这几种，ESM是依赖于ES静态模块结构（ES6）的一种更为高效的模块规范；

1.2 ES6

在 ES6 之前的JavaScript 模块化都是支出动态加载的，也就意味着模块的导入导出可以在运行时动态的变化。ES6 推出自己的一套模块化格式就是为了能够实现静态模块结构。这就意味着在编译时就要确定导入和导出的内容，不允许在运行时发生变化。

1.3 构建工具

习惯在 node 中编写代码后。重新在前端中编写html、css、js这些东西非常不方便，如不能放心的使用模块化规范（浏览器兼容性问题）。
我们就迫切的希望有一款工具可以对代码进行打包，将多个模块打包成一个文件。这样一来即解决了兼容性问题，又解决了模块过多的问题。
构建工具就起到这样一个作用，通过构建工具可以将使用 ESM 规范编写的代码转换为旧的 JS 语法，这样可以使得所有的浏览器都可以支持代码。

2. webpack

2.1 yarn

yarn其实就是一个包管理器，功能与npm功能类似。安装如下

安装yarn: npm install -g yarn。
配置镜像源为淘宝：yarn config set registry https://registry.npm.taobao.org -g。
初始化项目：yarn init -y。

2.2 webpack使用步骤

初始化项目 yarn init -y。
安装依赖webpack(核心代码)、webpack-cli(命令行工具) yarn add -D webpack webpack-cli。其中 -D 是表示 development,只在开发环境下生效，因为构建工具只需要在开发环境中使用。
在项目中创建src目录，然后编写代码（index.js）。
执行yarn webpack来对代码进行打包，打包后的文件会存放在dist文件夹下。加上-- wacth，就可以实现热更新，不用每次去build了。

2.3 webpack配置参数

生成 webpack.config.js 文件，在这其中我们使用 node.js 语法，因为其需要给node 来执行。一般很少使用，需要用到时再来回顾吧。

const path = require("path")
// 引入html插件
const HTMLPlugin = require("html-webpack-plugin")

module.exports = {
    mode: "development", // 设置打包的模式，production表示生产模式  development 开发模式
    // entry: "./hello/hello.js", // 用来指定打包时的主文件 默认 ./src/index.js
    // entry: ["./src/a.js", "./src/b.js"],
    // entry: {
    //     a: "./src/a.js",
    //     b: "./src/b.js"
    // },
    // entry: "./src/a.js", 

    output: {
        // path: path.resolve(__dirname, "dist"), // 指定打包的目录，必须要绝对路径
        // filename: "main.js", // 打包后的文件名
        // filename:"[name]-[id]-[hash].js",
        clean: true // 自动清理打包目录
    }, // 配置代码打包后的地址
    /* 
    webpack默认情况下，只会处理js文件，如果我们希望它可以处理其他类型的文件，则要为其引入loader

    - 以css为例：
        - 使用css-loader可以处理js中的样式
        - 使用步骤：
            1.安装：yarn add css-loader -D
            2.配置：
                module: {
                    rules: [
                        {
                            test: /\.css$/i,
                            use: "css-loader"
                        }
                    ]
                }
*/
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.(jpg|png|gif)$/i,
                type: "asset/resource" // 图片直接资源类型的数据，可以通过指定type来处理
            },
            {
                test: /\.m?js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                }
            }
        ]
    },

    plugins: [
        new HTMLPlugin({
            // title: "Hello Webpack",
            template: "./src/index.html"
        })
    ],

    devtool: "inline-source-map"
}

开发服务器

使用服务器的方式运行项目，而不是使用本地文件打开的方式,不用在服务器上刷新页面。

添加服务器包：yarn add -D webpack-dev-server。
启动服务器：yarn webpack serve --opne， open 表示自动打开浏览器。

3. vite

3.1 vite简介

Vite 也是前端的构建工具。
相较于 webpack，vite 采用了不同的运行方式：
- 开发时，并不对代码打包，而是直接采用 ESM 的方式来运行项目。
- 在项目部署时，在对项目进行打包。
除了速度外，vite 使用起来也更加方便。

3.2 基本使用

yarn add -D vite 安装开发依赖 vite
开发命令：
- yarn vite 启动开发服务器
- yarn vite build 打包代码
- yarn vite preview 预览打包后代码

生成项目：

创建项目：yarn create vite。
安装依赖：yarn。

3.3 配置参数

import { defineConfig } from "vite"
import legacy from "@vitejs/plugin-legacy"

export default defineConfig({
    plugins: [
        legacy({
            targets: ["defaults", "ie 11"] //兼容性
        })
    ]
})

课程地址：《前端构建工具（webpack&vite）教程李立超》

posted @ 2023-04-01 18:55 煽风想要点火阅读(136) 评论(0) 收藏举报

刷新页面返回顶部

theheboy