webpack&vite学习笔记__李立超课程

用户527713797619
96 阅读4分钟

构建工具

  • 编写前端代码时不方便：不能使用模块化规范（浏览器兼容性问题）、即使可以使用模块化规范也会面临模块过多时的加载问题
  • 希望有一款工具可以对代码进行打包，将多个模块打包成一个文件，这样一来即解决了兼容性问题，又解决了模块过多的问题。

Webpack

webpack用node写的，需要是node项目才可以使用，所以需要项目初始化

  • 用于现代 JavaScript 应用程序的静态模块打包工具
  • 使用步骤
    1. 初始化项目yarn init -y
    2. 安装依赖webpack、webpack-cli（command line interface命令行）
    3. 在项目中创建src目录，然后编写代码
    4. 执行yarn webpack / npx webpack来对代码进行打包，打包后生成dist目录
      • dist目录下应该全部为打包后的文件

webpack配置文件

  • webpack.config.js（区分js和json书写规范）

  • src 目录下遵循前端开发规范，src 以外的是给webpack看的，需要用node规范

mode

  • 设置打包的模式

    • production：生产模式，此时对于引入不调用的模块或变量，webpack不会打包

    • development：开发模式

    module.exports = {
    mode: "production",
    ......
}

entry

  • 用来指定打包时的主文件，默认入口文件是 index.js（一般不改，约定优于配置）

    entry: "./hello/hello.js", 
entry: ["./src/a.js", "./src/b.js"], // 传一个数组，把多个文件打包到一起
entry: {  // 传对象，会打包成多个文件
    a: "./src/a.js",
    b: "./src/b.js"
},

output

  • 配置代码打包后的地址，可以设置打包后的目录、打包后的文件名。默认值是 ./dist/main.js

    const path = require("path")
module.exports = {
    output: {
            path: path.resolve(__dirname, "dist"), // 指定打包的目录，必须要绝对路径
            filename: "bundle.js", // 打包后的文件名
            filename:"[name]-[id]-[hash].js", // []中是变量名，可以为打包后的多个文件指定文件名
            clean: true // 自动清理打包目录（path指定的目录）
        }, 
}

loader

webpack默认情况下，只会处理js文件，如果我们希望它可以处理其他类型的文件，则要为其引入loader

  • 配置文件中名字为module

  • 注意：使用webpack打包时，每引入一个类型的文件，则需要引入对应的loader

  • 使用步骤：

    1. 将css引入到js中（引入操作全部在js中进行）

      import "./style/index.css" // 直接将css引入到js中
import An from "./assets/an.jpg" // 引入图片

document.body.insertAdjacentHTML("beforeend", `<img src="${An}" />`)

    2. 安装对应的 loader：yarn add css-loader style-loader ts-loader -D

    3. 配置文件中进行配置

      • test：指定哪些文件需要通过loader处理
      • use：用何种loader处理
        • loader执行顺序为从后向前执行，因此 use 的顺序不能调换
      • type：处理图片直接资源类型的数据
    module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/i, //匹配以css结尾的文件
                //css-loader负责将css打包到js中 style-loader负责让css在网页中生效
                use: ["style-loader", "css-loader"] 
            },
            {
                test:/\.(jpg|png|gif)$/i,
                type:"asset/resource" // 处理图片
            }]
}}
babel

js的新特性在旧版本的浏览器中不兼容

  • babel可以将新的js语法转换为旧的js，以提高代码的兼容性

  • 如果希望在webpack支持babel，则需要向webpack中引入babel的loader

  • 使用步骤

    1. 安装 npm install -D babel-loader @babel/core @babel/preset-env

      • babel-loader：连接webpack和babel
      • @babel/core：完成代码转义
      • @babel/preset-env：预设环境，准备好常用的插件，比如把箭头函数转换为普通函数

    2. 配置：

      module: {
    rules: [
        {
            test: /\.m?js$/,
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env"]
                }
        }}
]}

  • 在package.json中设置浏览器版本兼容

    "browserslist": ["defaults"] // 配置参考：https://github.com/browserslist/browserslist

plugin

  • loader用来处理文件，插件plugin用来为webpack来扩展功能
html-webpack-plugin

  • 这个插件可以在打包代码后，自动在打包目录生成html页面

  • 使用步骤：

    1. 安装依赖：yarn add -D html-webpack-plugin
    2. 引入插件：const HTMLPlugin = require("html-webpack-plugin")
    3. 配置插件
    // 引入html插件
const HTMLPlugin = require("html-webpack-plugin")

module.exports = {
    plugins: [
        new HTMLPlugin({
            title: "Hello Webpack", //设置html的title
            template: "./src/index.html" // 设置html模板，打包后的html会根据模板文件扩展
        })
    ],
    devtool: "inline-source-map"
}

devtool

  • devtool:"inline-source-map"：将源码和编译后的代码进行映射，方便调试打包后的代码

开发服务器

  • webpack-dev-server：将代码部署到服务器中

  • 注意：使用webpack serve执行后，代码会打包到服务器执行，不生成dist目录，需要使用webpack重新打包

  • 使用步骤

    • 安装：yarn add -D webpack-dev-server

    • 启动：yarn webpack serve --open（--open启动服务器后自动在浏览器中打开）

Vite

webpack先打包再运行，但是打包速度慢导致性能较差

  • Vite也是前端的构建工具，相较于webpack，Vite采用了不同的运行方式：

    • 开发时，并不对代码打包，而是直接采用**ESM（ES模块）**的方式来运行项目
    • 在项目部署时，再对项目进行打包

  • 除了速度外，Vite使用起来也更加方便（开箱即用，都配置好了）

  • 本质上 Vite 和 Webpack 是打包工具，只是 Webpack 比较底层，需要自己手动去配置。

    ESM 必须通过 url 加载页面（即需要通过服务器运行）

  • 使用步骤：

    1. 安装：yarn add -D vite

    2. 不需要创建src，直接在根目录下写文件

      • 因为采用ESM，所以在html文件中引入js时，需要指定 type=“module”
        • ESM 必须通过 url 加载页面（即需要通过服务器运行）

    3. 开发命令：运行时自动加载到服务器中

      • npx vite 启动开发服务器，代码改页面改

      • npx vite build 打包代码（打包后的代码必须使用服务器访问）

      • npx vite preview 预览打包后代码

        "scripts": {
    "dev":"vite",
    "build":"vite build",
    "preview":"vite preview"
}

  • 使用命令构建项目

    npm create vite@latest	#使用 NPM
yarn create vite	#使用 Yarn
pnpm create vite	#使用 PNPM
#Vanilla 表示原生JS开发项目

插件

兼容性插件

  1. 安装插件：yarn add -D @vitejs/plugin-legacy terser

  2. 配置文件：vite.config.js

    import { defineConfig } from "vite" //引入该文件后，在编写config时会有提示，可加可不加
import legacy from "@vitejs/plugin-legacy"

export default defineConfig({
    plugins: [
        legacy({
            targets: ["defaults", "ie 11"]
        })
    ]
})
avatar
文章
阅读
粉丝