Webpack5 基础篇(一)

一. 基本使用

Webpack 是一个静态资源打包工具

它会以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去

输出的文件就是编译好的文件,就可以在浏览器端运行了

我们将Webpack输出的文件叫做bundle

1.功能介绍

Webpack 本身功能是有限的:

开发模式: 仅能编辑 JS中的ES Module语法
生产模式: 能编译JS中的ES Module 语法, 还能压缩JS代码

开始使用

1. 资源目录

webpack_code # 项目根目录（所有指令必须在这个目录运行）

└── src # 项目源码目录

├── js # js文件目录

│ ├── count.js

│ └── sum.js

└── main.js # 项目主文件

2. 创建文件

count.js

export default function count(x,y){

return x-y

}

sum.js

export default function sum(...args){

return args.reduce((p.c)=>p+c,0);

}

main.js

import count from "./js/count";

import sum from "./js/sum";

console.log(count(2, 1));

console.log(sum(1, 2, 3, 4));

3. 下载依赖

打开终端, 来到项目根目录,运行以下指令:

初始化package.json

npm init -y

此时会生成一个基础的package.json文件

需要注意的是package.json 中name字段不能叫做webpack,否则下一步会报错

下载依赖

npm i webpack webpack-cli -D

4.启用Webpack

开发模式

npx webpack ./src/main.js --mode ==development

生产模式

npx webpack ./src/main.js --mode=production

npx webpack: 是用来运行本地安装webpack包的

./src/main.js: 指定webpack 从main.js 文件开始打包,不但会打包main.js,还会将其依赖也一起打包进来

--mode==xxx: 指定模式(环境)

5. 观察输出文件

默认Webpack 会将文件打包输出到dist目录下,我们查看dist目录下文件情况就好了

Webpack 本身功能比较少,只能处理js资源,一但遇到css等其他资源就会报错,所以我们学习webpack,就是主要学习如何处理其他资源

二. 基本配置

1. 5 大核心概念

1. entry(入口)

指示Webpack 从哪个文件开始打包

2. output(输出)

提示Webpack打包完的文件输出到哪里去,如何命名等

3.loader(加载器)

webpack本身只能处理js,json等资源,其他资源需要借助loader,Webpack才能解析

4.plugins(插件)

扩展Webpack的功能

5.mode(模式)

主要由两种模式:

开发模式 : development
生产模式: production

6.webpack.config.js

const path = require('path'); //nodejs 核心模块,专门用来处理路径问题

module.exports = {

//入口

entry: './src/main.js',

//输出

output: {

//文件的输出路径

//__dirname:node.js的变量获取当前文件的绝对路径

path: path.resolve(__dirname,'dist'), //绝对路径

//文件名

filename: 'main.js'

},

//加载器

module: {

rules: [

//loader的配置

]

},

//插件

plugins: [],

//模式

mode: 'development'

}

三. 开发模式介绍

这个模式我们主要做两件事

1.编译代码,使浏览器能识别运行

开发时我们有样式资源,字体图标,图片资源,html资源等,webpack默认都不能处理这些资源,所以我们要加载配置来编译这些资源

2. 代码质量检查,树立代码规范

提前检查代码的一些隐患,让代码运行时能更加健壮

提前检查代码规范和格式,统一团队编码风格,让代码更优雅美观

四. 处理样式资源

Webpack 本身是不能识别样式资源的,所以我们需要借助Loader来帮助Webpack解析样式资源,我们找Loader都应该去官方文档中找到对应的Loader,然后使用, 官方文档找不到的话,可以从社区GitHub中搜索查询

css-loader | webpack 中文文档

1. 处理 Css 资源

1. 下载包

npm i css-loader style-loader -D

注意: 需要下载两个loader

2.功能介绍

css - loader : 负责将Css文件编译成Webpack能识别的模块
style-loader : 会动态创建一个Style标签,里面放置Webpack中Css模块内容,此时样式就会以Style标签的形式在页面上生效

3. 配置

javascript 复制代码

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

4.添加CSS资源

scr/css/index.css
.box1 {
width: 100px;
height: 100px;
background-color: pink;
}

引入到 main.js 中

import count from "./js/count";

import sum from "./js/sum";

// 引入 Css 资源，Webpack才会对其打包

import "./css/index.css";

console.log(count(2, 1));

console.log(sum(1, 2, 3, 4));

public/index.html

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<title>webpack5</title>

</head>

<body>

<h1>Hello Webpack5</h1>



<div class="box1"></div>



<script src="../dist/main.js"></script>

</body>

</html>

5. 运行指令

npx webpack

打开index.html 查看效果

2.处理less 资源同上,下载不同的load

1. 下载包

npm i sass-loader sass -D 注意需要下载两个

2. 功能介绍

sass-loader : 负责将Sass 文件编译成css文件

sass: sass-loader 依赖sass 进行编译

3. 配置

module: {

rules: [

{

// 用来匹配 .css 结尾的文件

test: /\.css$/,

// use 数组里面 Loader 执行顺序是从右到左

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

},

{

test: /\.less$/,

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

},

],

},

4. 添加Less资源

5. 运行指令

3.处理Sass和Scss资源

1. 下载包

npm i less-loader -D

2. 功能介绍

less-loader : 负责将Less文件编译成CSS文件

3. 配置

module: {

rules: [

{

// 用来匹配 .css 结尾的文件

test: /\.css$/,

// use 数组里面 Loader 执行顺序是从右到左

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

},

{

test: /\.less$/,

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

},

{

test: /\.s[ac]ss$/,

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

},

],

},

4. 添加Sass资源

5. 运行指令

4.处理styl资源

1. 下载包

npm i stylus-loader -D

2. 功能介绍

stylelus-loader: 负责将style 文件编译成Css文件

3. 配置

module: {

rules: [

{

// 用来匹配 .css 结尾的文件

test: /\.css$/,

// use 数组里面 Loader 执行顺序是从右到左

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

},

{

test: /\.less$/,

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

},

{

test: /\.s[ac]ss$/,

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

},

],

},

4. 添加Styl 资源

5. 运行指令

五. 处理图片资源

过去Webpack4时,我们处理图片资源通过file-loader 和url - loader 进行处理

现在Webpack5 已经将两个Loader功能内置到Webpack里了,我们只需要简单配置即可处理图片资源

1.配置

module: {

rules: [

{

// 用来匹配 .css 结尾的文件

test: /\.css$/,

// use 数组里面 Loader 执行顺序是从右到左

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

},

{

test: /\.less$/,

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

},

{

test: /\.s[ac]ss$/,

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

},

{

test: /\.styl$/,

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

},

{

test: /\.(png|jpe?g|gif|webp)$/,

type: "asset",

},

],

},

2. 使用图片资源

src/less/index.less

.box2 {

width: 100px;

height: 100px;

background-image: url("../images/1.jpeg");

background-size: cover;

}

sass文件

.box3

width: 100px

height: 100px

background-image: url("../images/2.png")

background-size: cover

src/styl/index.styl

.box5

width 100px

height 100px

background-image url("../images/3.gif")

background-size cover

3. 运行指令查看效果

4. 输出资源情况

此时,如果查看dist目录,会发现多了三张图片资源

因为Webpack 会将所有打包好的资源输出到dist目录下

为什么样式资源没有呢?

因为经过style-loader的处理.样式资源打包到main.js里面去了,所以没有额外输出出来

6. 对图片资源进行优化

将小于某个大小图片转换成dataURL形式 (Base64格式)

module: {

rules: [

{

test: /\.(png|jpe?g|gif|webp)$/,

type: "asset",

parser: {

dataUrlCondition: {

maxSize: 10 * 1024 // 小于10kb的图片会被base64处理

}

}

},

],

优点: 减少请求数量
缺点: 体积变得更大

此时输出的图片文件就只有两张,有一张图片以data URL 形式内置到js中了(注意: 需要将上次打包生成的文件情况,再重新打包才有效果)

六. 修改输出目录

1. 修改js输出目录

webpack文件

output: {

//所有文件的输出路径

//__dirname:node.js的变量获取当前文件的绝对路径

path: path.resolve(__dirname, 'dist'), //绝对路径

//入口文件打包输出文件名

filename: 'static/js/main.js'

},

示例效果

2. 修改images输出目录

修改配置

javascript 复制代码

module: {
    rules: [
      //loader的配置
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        },
        generator: {
          //输出图片名称 [hash:8]取图片hash的前10位 [ext]取文件原来扩展名 [query]取query参数
          filename: 'static/images/[hash:10][ext][query]'
        }
      }
    ]
  },

七. 自动清空上次打包内容 clear: true

javascript 复制代码

  output: {
    //所有文件的输出路径
    //__dirname:node.js的变量 获取当前文件的绝对路径
    path: path.resolve(__dirname, 'dist'), //绝对路径
    //入口文件打包输出文件名
    filename: 'static/js/main.js',
    //自动清空上次打包内容
    //原理: 在打包前,将path整个目录内容清空,在进行打包
    clean: true
  },

八. 处理字体图标资源

1. 下载字体图标文件阿里巴巴矢量图标库

2. 添加字体图标资源

使用

index.html

<i class="iconfont icon-ashbin"></i>

3. 配置

javascript 复制代码

 module: {

    rules: [

      //loader的配置

      {

        test: /\.(png|jpe?g|gif|webp)$/,

        type: 'asset',

        parser: {

          dataUrlCondition: {

            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理

          }

        },

        generator: {

          //输出图片名称 [hash:8]取图片hash的前八位 [ext]取文件原来扩展名 [query]取query参数

          filename: 'static/images/[hash:8][ext][query]'

        }

      },

      //字体图标

      {

        test: /\.(ttf|woff2?)$/,

        type: 'asset/resource',

        generator: {

          filename: 'static/media/[hash:8][ext][query]'

        }

      }

    ]

  },

type: "asset/resource" 和 type :"asset"的区别:

type: "asset/resource" 相当于file-loader,将文件转化成Webpack能识别的资源,其他不做处理
type: "asset" 相当于url-loader,将文件转化成Webpack能识别的资源,同时小于某个大小的资源会处理成data URL 形式

Webpack5 基础篇(一)

一. 基本使用

1.功能介绍

1. 资源目录

2. 创建文件

3. 下载依赖

4.启用Webpack

5. 观察输出文件

二. 基本配置

1. 5 大核心概念

1. entry(入口)

2. output(输出)

3.loader(加载器)

4.plugins(插件)

5.mode(模式)

6.webpack.config.js

三. 开发模式介绍

1.编译代码,使浏览器能识别运行

2. 代码质量检查,树立代码规范

四. 处理样式资源

1. 处理 Css 资源

1. 下载包

2.功能介绍

3. 配置

4.添加CSS资源

5. 运行指令

2.处理less 资源 同上,下载不同的load

1. 下载包

2. 功能介绍

3. 配置

4. 添加Less资源

5. 运行指令

3.处理Sass和Scss资源

1. 下载包

2. 功能介绍

3. 配置

4. 添加Sass资源

5. 运行指令

4.处理styl资源

1. 下载包

2. 功能介绍

3. 配置

4. 添加Styl 资源

5. 运行指令

五. 处理图片资源

1.配置

2. 使用图片资源

3. 运行指令 查看效果

4. 输出资源情况

6. 对图片资源进行优化

六. 修改输出目录

1. 修改js输出目录

2. 修改images输出目录

七. 自动清空上次打包内容 clear: true

八. 处理字体图标资源

1. 下载字体图标文件 阿里巴巴矢量图标库

2. 添加字体图标资源

3. 配置

2.处理less 资源同上,下载不同的load

3. 运行指令查看效果

1. 下载字体图标文件阿里巴巴矢量图标库