构建工具简介

当我们习惯了在node中编写代码的方式后，在回到前端编写html、css、js这些东西会感觉到各种的不便。比如：不能放心的使用模块化规范（浏览器兼容性问题）、即使可以使用模块化规范也会面临模块过多时的加载问题。

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

构建工具就起到这样一个作用，通过构建工具可以将使用ESM规范编写的代码转换为旧的JS语法，这样可以使得所有的浏览器都可以支持代码。

webpack介绍

本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。

使用步骤

初始化项目：npm init -y 安装依赖 webpack webpack-cli ：npm install webpack webpack-cli -D, -D表示设置为开发依赖 在项目中创建src目录，然后编写代码（index.js） 执行 npx webpack来对代码进行打包（打包后观察 dist 目录）

配置文件

mode

告知 webpack 使用相应模式的内置优化

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

production：生产模式

development：开发模式

entry

默认值是 ./src/index.js（一般不改，约定优于配置）

单个入口用路径字符串，多个传数组，对象写法分别命名打包。


entry: "./hello/hello.js", // 用来指定打包时的主文件 默认 ./src/index.js

entry: ["./src/a.js", "./src/b.js"],

entry: {

 a-js: "./src/a.js",

 b-js: "./src/b.js"

},

output


output: {

 path: path.resolve(__dirname, "dist"), // 指定打包的目录，必须要绝对路径

 filename: "main.js", // 打包后的文件名，可以使用占位符：filename:"[name]-[id]-[hash].js",

 clean: true // 自动清理打包目录

},

filename 默认值是 main.js，多个入口 entry 的情况，使用占位符(substitutions) 来确保每个文件具有唯一的名称 filename: [name]-[id]-[hash].js

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

path 指定打包目录，必须要绝对路径，一般会使用Node.js中的path模块来操作文件路径


const path = require('path'); //引入path模块

path.resolve(__dirname, "dist") //表示当前目录下的dist文件夹

module（loader）

webpack默认只能处理js文件，为了实现工程化管理所有资源，就产生了loader，将js以外的资源转换为有效模块，以供应用程序使用。

使用步骤：安装对应loader -> 配置 -> import导入资源

配置项：

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

use 属性：定义出在进行转换时，使用哪个 loader（字符串、数组、对象），loader 执行顺序为从后向前执行，因此 use 的数组顺序不能调换。

type 属性：加载资源文件

exclude 属性：不需要转换的文件夹（正则表达式）


module.exports = {

 module: {

 rules: [

 //注意是数组

 {

 test: /\.css$/i, //注意不是字符串

 use: ["style-loader", "css-loader"]

 },

 {

 test: /\.(jpgpnggif)$/i,

 type: "asset/resource"

 },

 ],

 },

};

css


//1.安装

npm install css-loader style-loader -D

//2.配置

//css-loader 只负责打包，style-loader 负责渲染生效

{ test: /\.css$/i, use: ['style-loader','css-loader'] }

//3.导入资源

// index.js

//直接将css引入到js中

import "./style/index.css"

资源模块

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader，有 4 种模式：

  • asset/resource 发送一个单独的文件并导出 URL。

  • asset/inline 导出一个资源的 data URI。

  • asset/source 导出资源的源代码。

  • asset 在导出一个 data URI（inline）和发送一个单独的文件（resource）之间自动选择。


//webpack.config.js

module.exports = {

 mode: "production",

 module: {

 rules: [

 {

 test: /\.(pngjpg)$/i,

 type: "asset/resource",

 },

 {

 test: /\.ico$/i,

 type: "asset/inline",

 },

 {

 test: /\.txt$/i,

 type: "asset",

 },

 ],

 },

};

//index.js

import png from "./1.png";

import ico from "./1.ico";

import txt from "./1.txt";

document.body.insertAdjacentHTML("beforeend", `![](${png})`);

document.body.insertAdjacentHTML("beforeend", `![](${ico})`);

document.body.insertAdjacentHTML("beforeend", `${txt}`);

babel


// 1.安装

npm install -D babel-loader @babel/core @babel/preset-env

// 2.配置

module: {

 rules: [

 {

 test: /\.m?js$/,

 exclude: /(node_modulesbower_components)/,

 use: {

 loader: 'babel-loader',

 options: {

 presets: ['@babel/preset-env'],

 },

 },

 },

 ];

}

babel-loader：连接webpack和babel的中间件

@babel/core：babel的转换核心

@babel/preset-env：预设环境

babel 转换依据来自package.json中设置的兼容列表


"browserslist": [

 "defaults"

]

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

plugin

插件用来为webpack扩展功能，与 loader 区别在于，插件不改变代码本身，用来解决 loader 无法实现的其他事，Webpack 提供很多开箱即用的插件。

html-webpack-plugin是一个常用插件，这个插件可以在打包代码后，自动在打包目录生成html页面。


// 1.安装

npm install html-webpack-plugin -D

// 2.引入依赖

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

// 3.配置插件

plugins: [

 new HTMLPlugin({

 title: "Hello Webpack", //设置title

 template: "./src/index.html" //模板，自动引入script脚本

 })

]

devtool

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

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

执行 npx webpack –watch可以实现代码发生变化时自动更新打包。

webpack-dev-server 可以实现起一个服务器来调试代码


// 安装

npm install webpack-dev-server -D

// 启动

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

Vite

概念

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

开发时，并不对代码打包，而是直接采用 ESM（ES模块） 的方式来运行项目，在项目部署时，再对项目进行打包，除了速度外，Vite使用起来也更加方便，开箱即用，都配置好了。

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

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

使用

安装

Vite npm install vite -D

Vite 的源码目录默认就是项目根目录

在页面中引入 js 文件的时候要指定 type="module",修改路径直接在 script 标签中修改 src 属性正确即可（webpack需要配置）.

开发命令

vite 启动开发服务器

vite build 打包代码

vite preview 预览打包后代码

使用命令构建项目：

npm create vite@latest #使用 NPM

Vanilla 表示原生JS开发项目

使用插件

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

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

配置文件：vite.config.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）