完整教程：构建工具webpack&vite

简介

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

webpack

webpack介绍

使用步骤:

初始化项目yarn init -y,这里的yarn可以换成其他
安装依赖 webpack和webpack-cli:yarn add -D webpack webpack-cli

装完webpack-cli之后可以在命令行中使用webpack
-D是表明这是开发依赖

在项目中创建src目录，然后编写代码（默认主文件index.js）
执行yarn webpack来对代码进行打包（打包后观察dist目录,里面是一个main.js,里面的内容就是打包后的代码）

src 目录下的是遵循前端开发规范的，src 以外的要用node规范CommonJS

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传目录是这样的

export default{
set1(){
console.log("hello")
}
}

export default{
set2(){
console.log("webpack")
}
}

import m1 from "./m1"
import m2 from "./m2"
m1.set1()
m2.set2()

然后再终端输入命令yarn webpack,发现此时main.js变成了

(() => {
"use strict";
const e = {
set1() {
console.log("hello");
},
},
s = {
set2() {
console.log("webpack");
},
};
e.set1(), s.set2();
})();

要注意每次修改非mian.js都要yarn webpack,因为两个是不同文件,我们最终运行的是那个打包好的文件(这里是main.js),这样才能保证main.js内容的更新。不过这种方法有点麻烦,我们以后会有解决办法的。

配置文件介绍

yarn安装依赖

在demo-02中新建一个文件,名叫webpack.config.js,这个是webpack配置文件,它的作用是用来配置webpack是怎么去运行的这个文件是给nodejs看的,在这里写代码要遵循node的模块化规范

简记:src里是遵循前端,src外是遵循node

mode

module.exports={
mode:"production"
}

设置打包的模式，production表示生产模式,development开发模式

entry

用来指定打包时的主文件,也叫做入口文件,默认./src/index.js,这是约定俗成的规矩,一般不修改

分为三种:

单个入口文件

entry:"./hello/hello.js"

数组传多个文件

entry:["./src/a.js","./src/b.js"],结果是把两个文件都打包在一起,在main.js中

对象传文件

entry:{a:"./src/a.js",b:"./src/b.js"},结果是分别打包,不是main.js,而是a.js,b.js,与对象的属性名一致

output

有三个参数:

path:用于指定打包的目录,必须要是绝对路径,默认是dist,(不要忘记引入path模块)
filenmae:用于指定打包后的文件名,默认是main.js。多文件打包时(像上述对象传多个文件)，应该用变量，如[name].js,还可以往后加其他变量像[id],[hash]
clean:用于是否自动清理打包目录下的文件,默认值是false,也就是如果有新打包后的文件名的文件,会保留原来的文件;如果是同名文件,则会代替里面的内容。当设置为true时,会清理打包目录下的文件,生成最新的打包后的文件

output: {
path: path.resolve(__dirname, "dist"),
// filename: "hello.js",
filename: "[name]-[id].js",
clean: true,
},

loader

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

以css为例子:

前置代码:

h1 {
background-color: antiquewhite;
}

import "./style/index.css";
document.body.insertAdjacentHTML(
"beforeend",
"<h1>昨天天气不错,晚上下了大雨</h1>"
);

insertAdjacentHTML把一段 HTML 字符串 插入到元素的指定位置，而不破坏原有内容。

"beforeend"告诉 insertAdjacentHTML 要插到结束标签之前（元素内部最后面）

使用css-loader可以处理js中的样式

使用步骤:

安装:**yarn add css-loader -D**

每部分的意思是:

组成部分	含义
`yarn add`	用 Yarn 把某个包安装到当前项目。
`css-loader`	要安装的包名，Webpack 的 loader 之一，负责把 `.css` 文件翻译成 JS 模块，使 Webpack 能识别并打包 CSS。
`-D` / `--dev`	把包记录到 `package.json` 的 devDependencies，表示“开发时依赖”，上线后运行时不再需要。

配置

module: {
rules: [
{
test: /\.css$/i,
use: "css-loader",
},
],
},

虽然配置叫做loader,但是写名称写module
正则 /\.css$/i 表示以 .css 结尾的文件，忽略大小写。
use: "css-loader":用 css-loader 把 CSS 文件内容转成 JS 字符串，让 Webpack 能识别、合并、压缩。注意：css-loader 只负责 “读 CSS”，不会把样式真正塞进页面；
如果要让样式生效，还需配合 style-loader

安装yarn add style-loader -D

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

有顺序要求,后者先执行，前者再插入

若引入图片，则配置是

{
test: /\.(jpg|png|gif)$/i,
type: "asset/resource",
}

import a from "./img/img.png";
document.body.insertAdjacentHTML("beforeend", `<img src="${a}">`);

图片直接资源类型的数据，可以通过指定type来处理

注意：每引入新的资源就要在loader中配置

babel

在编写js代码时，经常需要使用一些js中的新特性，而新特性在旧的浏览器中兼容性并不好。此时就导致我们无法使用一些新的特性。
但是我们现在希望能够使用新的特性，我们可以采用折中的方案。依然使用新特性编写代码，但是代码编写完成时我们可以通过一些工具将新代码转换为旧代码。
babel就是这样一个工具，可以将新的js语法转换为旧的js，以提高代码的兼容性
如果希望在webpack支持babel，则需要向webpack中引入babel的loader

使用步骤:

安装 npm install -D babel-loader @babel/core @babel/preset-env
- babel-loader：连接webpack和babel的中间件
- @babel/core：babel的转换核心
- @babel/preset-env：预设环境
配置

module: {
  rules: [
    {
      test: /\.m?js$/,//以js或mjs结尾的文件
      exclude: /(node_modules|bower_components)/,//除了node_modules和bower_components不处理
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

在package.json中设置兼容列表

"browserslist": [
        "defaults"
 ]

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

插件(plugin)

插件用来为webpack来扩展功能

html-webpack-plugin这个插件可以在打包代码后,自动在打包目录生成html页面

使用步骤:

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

plugins: [
new HTMLPlugin({
// title: "hello 你好",
template: "./src/aaa.html",
}),
]

34行表明除了可以自动创建文件以外,还可以指定一些信息:第三行指定title,第四行指定模版

devtool

devtool:"inline-source-map"

把源码和编译后的代码做一个映射,运行的是打包后的代码,但是可以通过源码对代码进行调试了

开发服务器

之前每次修改都要在集成终端输入命令yarn webpack,有点麻烦，把命令改成yarn webpack --watch,每次保存就会自动构建.另说一下在package.json中写入

"scripts": {
"build":"webpack",
"watch":"webpack --watch"
}

yarn webpack就直接输yarn build,写yarn webpack --watch直接输yarn watch,在这里简写命令就很方便

但其实这种模式也不常用,现在练习都是静态资源路径访问的,但是真实开发环境,项目应该部署到服务器上,伪类模拟这种开发,我们也希望项目有个临时服务器,测试和开发都是服务器比较统一,有以下步骤来实现

安装：yarn add -D webpack-dev-server
启动：yarn webpack serve,点击里面的8080那个地址就跳转到浏览器看(也会自动刷新构建);

如果输入yarn webpack serve --open（--open表示启动服务器后自动打开）,会自己打开浏览器,不用点击了

yarn webpack serve是把代码实时打包在服务器里,不是在dist里,所以开发完必须手动yarn build来保证dist里是最新的代码

Vite

简介

Vite也是前端的构建工具
相较于webpack，Vite采用了不同的运行方式：
- 开发时，并不对代码打包，而是直接采用ESM（ES模块）的方式来运行项目
- 在项目部署时，再对项目进行打包
除了速度外，Vite使用起来也更加方便（开箱即用，都配置好了）

基本使用

yarn init -y初始化项目
安装开发依赖 Vite yarn add -D vite

Vite 的源码目录默认就是项目根目录,就不用写src啥的,直接创建文件就行
在页面中引入 js 文件的时候要指定 type=“module”,表明这块采取的是ES模块化规范
修改路径直接在 script 标签中修改 src 属性正确即可（webpack需要配置）

开发命令：
- yarn vite 启动开发服务器
- yarn vite build 打包代码
- yarn vite preview预览下打包后的代码

注意打包后的文件也是采用ES模块,而ES模块有一个特点就是必须通过URL进行加载,若访问静态页面就出不来。此时有两种解决办法：1.整一个服务器在服务器里运行 2. yarn vite preview 预览打包后的代码

使用命令构建项目:

npm create vite@latest :使用 NPM

yarn create vite :使用 Yarn

pnpm create vite :使用 PNPM

(Vanilla 表示原生JS开发项目)

vite都给我们配置好了不用自己配置loader啥的,就是说我们引入css这样的文件就可以直接引入了

使用插件

安装插件：npm add -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）

posted @ 2025-11-26 18:36 clnchanpin 阅读(34) 评论(0) 收藏举报

刷新页面返回顶部