webpack 对资源的处理

SOBER大约 8 分钟

webpack 对资源的处理

一、处理样式

学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源

介绍

Webpack 本身是不能识别样式资源的，所以我们需要借助 Loader 来帮助 Webpack 解析样式资源

我们找 Loader 都应该去官方文档中找到对应的 Loader，然后使用，也可以从社区 Github 中搜索查询

Webpack 官方 Loader 文档open in new window

Css

1. 下载依赖包

npm install css-loader style-loader -D

注意

需要下载 css-loader style-loader 两个 loader

2. 功能介绍

css-loader： 负责将 Css 文件编译成 Webpack 能识别的模块
style-loader： 会动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容

3. 配置

（1）创建 css 文件： src/css/index.css

.box{
    width: 100px;
    height: 100px;
}

（2）在 main.js 中引入

import "./css/index.css"

（3）在 webpack.config.js 中配置

module.exports = {
    module: {
        rules: [
            {  
                // 只检测 .css 文件，i 指忽略大小写
                test: /\.css$/i,
                /**
                 * 执行顺序：从右到左，（从下到上）执行
                 * css-loader：将 css 资源编译成 commonjs 的模块到 js 中 
                 * style-loader：将 js 中 css 通过创建 style 标签添加 html 文件中生效
                 **/
                use: ["style-loader", "css-loader"]
            },
        ]
    },
}

Less

1. 下载依赖包

npm install less-loader -D

2. 功能介绍

less-loader： 负责将 less 文件编译成 css 文件

3. 配置

（1）创建 less 文件： src/less/index.less

.box{
    width: 100px;
    height: 100px;
}

（2）在 main.js 中引入

import "./less/index.less"

（3）在 webpack.config.js 中配置

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

Sass 和 Scss

1. 下载依赖包

npm install sass-loader sass -D

注意

需要下载 sass-loader sass 两个包

2. 功能介绍

sass-loader： 负责将 sass 文件编译成 Css 文件
sass： sass-loader 依赖 sass 进行编译

3. 配置

（1）创建 scss 文件： src/less/index.scss

.box{
    width: 100px;
    height: 100px;
}

（2）在 main.js 中引入

import "./scss/index.scss"

（3）在 webpack.config.js 中配置

module.exports = {
    module: {
        rules: [
            {  
                test: /\.s[ac]ss$/i, // [ac] 表示 a 和 c 都可以
                use: ["style-loader","css-loader","less-loader"]
            }
        ]
    },
}

Styl

1. 下载依赖包

npm install stylus-loader -D

2. 功能介绍

stylus-loader： 负责将 Styl 文件编译成 Css 文件

3. 配置

（1）创建 styl 文件： src/styl/index.styl

.box3
    width 100px
    height 100px
    background-color #00f508

（2）在 main.js 中引入

import "./styl/index.styl"

（3）在 webpack.config.js 中配置

module.exports = {
    module: {
        rules: [
            {  
                test: /\.styl$/i,
                use: ["style-loader","css-loader","stylus-loader"]
            }
        ]
    },
}

二、处理图片资源

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

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

1. 配置

const path = require("path")
module.exports = {
    module: {
        rules: [
            {  
                test: /\.(png|jpe?g|gif|webp|svg)$/,
                type: "asset",
                parser: {
                    dataUrlCondition: {
                        /** 小于 600kb 的图片转换为 base64 
                         * 优点：减少请求数量
                         * 缺点：转为 base64 体积会变大，导致整个项目体积变大
                        */
                        maxSize: 600*1024, // 600kb
                    }
                }
            }
        ]
    },
}

2. 添加图片资源

src/image/1.jpg
src/image/2.png
...

3. 使用图片资源

src/css/index.css 文件中

.image1{
  width: 100px;
  height: 100px;
  background-image: url("../image/1.jpg");
  background-size: cover;
  }
  .image2{
      width: 100px;
      height: 100px;
      background-image: url("../image/2.png");
      background-size: cover;
  }

4. 使用命令打包观察

小于 600kb 的图片转为了 base64

大于 600kb 的图片请求服务器

三、处理字体图标

1. 下载字体图标

打开阿里巴巴矢量图标库open in new window
选择图标 ——> 添加到购物车 ——> 添加至项目 ——> 下载至本地

2. 添加字体图标

src/font/iconfont.ttf
src/font/iconfont.woff
src/font/iconfont.woff2
src/font/iconfont.css

注意

字体文件路径需要修改

3. 修改配置文件 main.js

四、处理其他资源

开发中可能还存在一些其他资源，如音视频等

1. 配置

webpack.config.js

module.exports = {
    module: {
        rules: [
            {
                test: /\.(ttf|woff2|map3|map4|avi)$/,
                type: "asset/resource",
                generator: {
                    // 输出文件名称
                    filename: "static/media/[hash:10][ext][query]",
                }
            }
        ]
    },
}

五、处理 js 文件

有人可能会问，js 资源 Webpack 不能已经处理了吗，为什么我们还要处理呢?

原因是 Webpack 对js 处理是有限的，只能编译 js 中 ES 模块化语法，不能编译其他语法，导致 js 不能在IE等浏览器运行，所以我们希望做一些兼容性处理，其次开发中，团队对代码格式是有严格要求的，我们不能由肉眼去检测代码格式，需要使用专业的工具来检测。

针对js 兼容性处理，我们使用 Babel 来完成
针对代码格式，我们使用 Eslint 来完成

Eslint

介绍

可组装的 JavaScript 和 JSX 检查工具。

意思就是：它是用来检测 js 和 jsx 语法的工具，可以配置各项功能

我们使用 Eslint，关键是写 Eslint 配置文件，里面写上各种 rules 规则，将来运行 Eslint 时就会以写的规则对代码进行检查

1. 新建文件

在 package.json 文件中的 eslintConfig 字段里面也可以直接写配置不需要创建文件

配置文件有很多种写法，挑选以下一种，新建文件，位于项目根目录， ESLint 会查找和自动读取它们，所以以下配置文件只需要存在一个即可，具体请看官方文档open in new window

.eslintrc.eslintrc
.eslintrc.eslintrc.js
.eslintrc.eslintrc.json

2. 具体配置

我们以 .eslintrc.js 配置文件为例

module.exports = {
    /** 解析选项 */
    parserOptions: {
        ecmaVersion: 6, // ES 语法版本
        sourceType: "module", // ES 模块化
        ecmaFeatures: { // ES 其他特性
            jsx: true, // 开启 jsx 语法校验
        }
    },
    /** 具体检查规则 */
    rules: {
        semi
    },
    /** 继承其他规则 */
    extends: [],
}

parserOptions：解析选项

rule：具体规则

off 或 0 —— 关闭规则
warn 或 1 —— 开启规则，使用警告级别的错误: warn (不会导致程序退出)
error 或 2 —— 开启规则，使用错误级别的错误 error (当被触发的时候，程序会退出)

module.exports = {
  rules: {
      semi: "error", // 禁使用分号
      'array-callback-return': 'warn', // 强制数组方法的回调函数中有 return 语句，否则警告
      'default-case': [
          'warn', // 要求 switch 语句中有 default 分支，否则警告
          {
              commentPattern: '^no default$' // 允许在最后注释 no default，就不会有警告了
          }
      ],
      eqeqeq: [
          'warn', // "强制使用 ==-和 !==，否则警告",
          'smart', // 除了少数情况下不会有警告
      ]
  }
}

extends：规则继承
开发中一点点写 rules 规则太费劲了，所以有更好的办法，继承现有的规则。现有以下较为有名的规则
- Eslint 官方的规则：eslint:recommended
- Vue cli 官方的规则：plugin:vue/essential
- React cli 官方的规则：react-app
```
  module.exports = {
      extends: ['react-app'],
      rules: {
          // 我们的规则会覆盖掉所继承的规则
          // 所以想要修改规则直接改就是了
      }
  }
```

3. 在 webpack 中使用

下载包

npm install eslint-webpack-plugin eslint -D

定义 Eslint 配置文件（.eslintrc.js 文件中）

  module.exports = {
      /** 解析选项 */
      parserOptions: {
          ecmaVersion: 6, // ES 语法版本
          sourceType: "module", // ES 模块化
          ecmaFeatures: { // ES 其他特性
              jsx: true, // 开启 jsx 语法校验
          }
      },
      /** 具体检查规则 */
      rules: {
          "no-var": 2, // 不能使用 var 定义变量
      },
      /** 继承其他规则 */
      extends: ['eslint:recommended'],
      env: {
          node: true, // 启用 node 中全局变量
          browser: true, // 启用浏览器中全局变量
      }
  }

修改 webpack.config.js 代码

  const ESlintPlugin = require('eslint-webpack-plugin')
  module.exports = {
      plugins: [
          /** plugins 的配置 */
          new ESlintPlugin({
              context: path.resolve(__dirname, "src")
          })
      ],
  }

完成

4. 过滤不需要校验的文件或者文件夹

项目根目录下创建 .eslintignore 文件
```
  dist
  src/main.js
```

Bable

介绍

JavaScript 编译器。官方文档open in new window

主要用于将 ES6 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中

1. 新建文件

在 package.json 文件中的 babel 字段里面也可以直接写配置不需要创建文件

配置文件有很多种写法，挑选以下一种，新建文件，位于项目根目录， babel 会查找和自动读取它们，所以以下配置文件只需要存在一个即可，具体请看官方文档open in new window

babel.config.js
babel.config.json
.babelrc.babelrc
.babelrc.babelrc.js
.babelrc.babelrc.json

2. 具体配置

我们以 babel.config.js 配置文件为例

  module.exports = {
      /** 预设 */
      presets: [],
  }

presets：预设
简单理解：就是一组 Babel 插件，扩展 Babel 功能
- @babel/preset-env：一个智能预设，允许您使用最新的 JavaScript。
- @babel/preset-react：一个用来编译 React JSX 语法的预设
- @babel/preset-typescript：一个用来编译 TypeScript 语法的预设

3. 在 webpack 中使用

下载包

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

定义 babel 配置文件（babel.config.js 文件中）

  module.exports = {
      /** 添加智能预设 */
      presets: ["@babel/preset-env"],
  }

修改 webpack.config.js 代码

  module.exports = {
      module: {
          rules: [
              {
                  test: /\.js$/,
                  exclude: /node_modules/, // 排除 node_modules 中的 js 文件，这些文件不处理
                  use: {
                      // 输出文件名称
                      loader: "babel-loader",
                      /** babel 的配置项也可以直接写到 options 选项中，也可以写到 babel.config.js 文件中 */
                      // options: {
                      //     presets: ["@babel/preset-env"]
                      // }
                  }
              }
          ]
      },
  }

完成

六、处理 HTML

1. 下载包

npm i html-webpack-plugin -D

2. 配置（webpack.config.js）

const path = require("path")
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    module: {
    plugins: [
        new HtmlWebpackPlugin({
            /**
             * 模板：以 public/index.html 文件创建新的 html 文件
             * 新的 html 文件特点：
             *   1. 结构和原来的一样
             *   2. 会自动引入打包输出的资源
             */
            template: path.resolve(__dirname, "public/index.html")
        })
    ],
    }
}

webpack 对资源的处理

# webpack 对资源的处理

# 一、处理样式

# 介绍

# Css

# 1. 下载依赖包

# 2. 功能介绍

# 3. 配置

# （1） 创建 css 文件： src/css/index.css

# （2）在 main.js 中引入

# （3）在 webpack.config.js 中配置

# Less

# 1. 下载依赖包

# 2. 功能介绍

# 3. 配置

# （1） 创建 less 文件： src/less/index.less

# （2）在 main.js 中引入

# （3）在 webpack.config.js 中配置

# Sass 和 Scss

# 1. 下载依赖包

# 2. 功能介绍

# 3. 配置

# （1） 创建 scss 文件： src/less/index.scss

# （2）在 main.js 中引入

# （3）在 webpack.config.js 中配置

# Styl

# 1. 下载依赖包

# 2. 功能介绍

# 3. 配置

# （1） 创建 styl 文件： src/styl/index.styl

# （2）在 main.js 中引入

# （3）在 webpack.config.js 中配置

# 二、处理图片资源

# 1. 配置

# 2. 添加图片资源

# 3. 使用图片资源

# 4. 使用命令打包观察

# 三、处理字体图标

# 1. 下载字体图标

# 2. 添加字体图标

# 3. 修改配置文件 main.js

# 四、处理其他资源

# 1. 配置

# 五、处理 js 文件

# Eslint

# 介绍

# 1. 新建文件

# 2. 具体配置

# 3. 在 webpack 中使用

# 4. 过滤不需要校验的文件或者文件夹

# Bable

# 介绍

# 1. 新建文件

# 2. 具体配置

# 3. 在 webpack 中使用

# 六、处理 HTML

# 1. 下载包

# 2. 配置（webpack.config.js）

# 3. 打包、观察打包结果

webpack 对资源的处理

一、处理样式

介绍

Css

1. 下载依赖包

2. 功能介绍

3. 配置

（1）创建 css 文件： src/css/index.css

（2）在 main.js 中引入

（3）在 webpack.config.js 中配置

Less

1. 下载依赖包

2. 功能介绍

3. 配置

（1）创建 less 文件： src/less/index.less

（2）在 main.js 中引入

（3）在 webpack.config.js 中配置

Sass 和 Scss

1. 下载依赖包

2. 功能介绍

3. 配置

（1）创建 scss 文件： src/less/index.scss

（2）在 main.js 中引入

（3）在 webpack.config.js 中配置

Styl

1. 下载依赖包

2. 功能介绍

3. 配置

（1）创建 styl 文件： src/styl/index.styl

（2）在 main.js 中引入

（3）在 webpack.config.js 中配置

二、处理图片资源

1. 配置

2. 添加图片资源

3. 使用图片资源

4. 使用命令打包观察

三、处理字体图标

1. 下载字体图标

2. 添加字体图标

3. 修改配置文件 main.js

四、处理其他资源

1. 配置

五、处理 js 文件

Eslint

介绍

1. 新建文件

2. 具体配置

3. 在 webpack 中使用

4. 过滤不需要校验的文件或者文件夹

Bable

介绍

1. 新建文件

2. 具体配置

3. 在 webpack 中使用

六、处理 HTML

1. 下载包

2. 配置（webpack.config.js）

3. 打包、观察打包结果