wangry

Appearance

基础知识 ​

webpack

构建工具 ​

html，css，js：不能放心的使用模块化规范（浏览器兼容问题），即使可以使用模块化规范也会面临模块过多时的加载问题。

希望有一款工具可以对代码进行打包，将多个模块打包成一个文件。这样既可以解决兼容问题，又解决了模块过多的问题。

通过构建工具可以将使用ESM规范编写的代码转换为旧的JS语法，可以让所有的浏览器都可以支持代码

webpack ​

使用步骤：

1、初始化项目yarn init -y

2、安装依赖webpack、webpack-cli

bash
yarn add -D webpack webpack-cli

3、项目中创建src目录，然后编写代码

4、执行yarn webpack对代码进行打包，打包后观察dist文件夹

配置文件 ​

js
const path = require("path")
module.exports = {
    mode: "production", 
    entry: "./src/index.js",
    output: {
    }, 
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["style-loader", "css-loader"]
            }
        ]
    }
}

mode：告诉webpack使用相应模式的内置优化

  • none: 不使用任何默认优化选项

  • production：生产模式

  • development：开发模式

entry：默认值是./src/index.js

  • 单个入口语法【最常见】 entry: string | [string]

  • 多个传数组 entry: ['./src/file_1.js', './src/file_2.js']

  • 对象写法分别命名打包 entry: {app: './src/app.js',adminApp: './src/adminApp.js',},

output：默认值是./dist/main.js，其他生产文件默认放置在./dist文件夹中

  • filename:"bundle.js"：设置打包后的文件名

多个入口 entry 的情况 filename: [name]-[id]-[hash].js

使用 占位符(substitutions) 来确保每个文件具有唯一的名称（很少用）

  • clean: true 自动清理打包目录（path指定的目录），只保留当前这次打包的文件

  • path: "" 指定打包目录，必须要绝对路径

一般会使用Node.js中的path模块来操作文件路径

js
const path = require('path');	//引入path模块
path.resolve(__dirname, "dist")	//表示当前目录下的dist文件夹

loader：让webpack能够处理其他类型的文件，并将他们转换为有效模块，以供应用程序使用。并被添加到以来图中

1、安装对应的loader：yarn add css-loader style-loader ts-loader -D

2、配置方式：

  • test 属性：识别出哪些文件需要被转换（使用正则表达式/.css$/i）

  • use 属性：定义出在进行转换时，使用哪个 loader（字符串、数组、对象）

  • type 属性：加载图像资源，设置为"asset/resource" exclude 属性：不需要转换的文件夹（正则表达式）

js
module.exports = {
  module: {	// 易漏点
    rules: [ 
      { test: /\.css$/, use: ['style-loader','css-loader'] },
      { test: /\.ts$/, use: 'ts-loader' },
      { test:/\.(jpg|png|gif)$/i,type:"asset/resource" },
    ],
  },
};

css-loader只负责打包，style-loader负责渲染生效【单一职责原则】 loader执行顺序为从后向前执行，use数组顺序不能调换

3、内联方式：在每个import语句中显式指定loader

使用 ! 将资源中的 loader 分开。每个部分都会相对于当前目录解析。

js
import Styles from 'style-loader!css-loader?modules!./styles.css';

  • 使用!前缀，将禁用所有已配置的normal loader（普通loader）

  • 使用!!前缀，将禁用所有已配置的loader（preLoader，loader，postLoader）

  • 使用-!前缀，将禁用所有已配置的preLoader和loader，但是不禁用postLoaders

选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}。

尽可能使用 module.rules，因为这样可以减少源码中样板文件的代码量，并且可以在出错时，更快地调试和定位 loader 中的问题。

babel：

  • 在编写js代码时，经常需要使用一些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的转换核心

  • @babel/preset-env：预设环境

2、配置

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

3、在package.json中设置兼容列表

js
"browserslist": [
        "defaults"
 ]

配置参考：https://github.com/browserslist/browserslist

plugin

用来为webpack扩展功能

插件目的在于解决loader无法实现的其他事

webpack提供很多开箱即用的插件

常用插件：

html-webpack-plugin：可以在打包代码后，自动在打包目录生成html页面

1、安装依赖yarn add -D html-webpack-plugin

2、引入依赖

js
const HTMLPlugin = require("html-webpack-plugin")

3、配置

js
plugins: [
        new HTMLPlugin({
            // title: "Hello Webpack",	//设置title
            template: "./src/index.html"	//模板，自动引入script脚本
        })
    ]

devtool

devtool:"inline-source-map"配置源码的映射，方便调试打包后的代码。

开发服务器（webpack-dev-server）

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

启动：yarn webpack serve --open（--open表示启动服务器后自动打开）

配置 webpack –watch 执行，（在本地文件夹中访问）代码发生变化时自动更新打包。

grunt/glup的对比

vite ​

vite也是前端的构建工具，相比webpack，vite采用了不同的运行方式：

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

除了速度外，vite使用起来也更加方便

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

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

基本使用 ​

1、安装依赖yarn add -D vite

2、vite的源代码目录默认是项目的根目录

  • 在页面中引入js文件的时候要指定 type=“module”

  • 修改路径直接在 script 标签中修改 src 属性正确即可（webpack需要配置）

3、开发指令

  • vite 启动开发服务器

  • vite build 打包代码

  • vite preview 预览打包后代码

4、使用命令构建

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

5、使用插件

安装插件：npm add -D @vitejs/plugin-legacy

@vitejs/plugin-legacy：兼容传统浏览器的语法转换插件

配置文件：vite.config.js

js
// vite.config.js
import legacy from '@vitejs/plugin-legacy'	//引入插件
import { defineConfig } from 'vite'	//语法提示（可选）
export default defineConfig({	//写上defineConfig配置时会有提示
  plugins: [	//配置插件
    legacy({
      targets: ['defaults', 'IE 11'],	//配置兼容版本
    }),
  ],
})

需要使用ES6的模块化（export default）去暴露文件（区别于 webpack 使用require）