处理资源文件

样式资源

1. CSS 资源

1.1 下载依赖

shell

npm i css-loader style-loader -D

css-loader : 将 css 文件编译成 webpack 能够识别的模块
style-loader : 动态创建一个 Style 标签，里面放置 Webpack 中 Css 模块内容
解析过程和效果

1.2 配置

webpack.config.js：

module.exports = {
  /* 代码省略 */
  module:{
    rules:[
      // 正则匹配 .css结尾文件
      test:/\.css$/,
      // 执行顺序从右到左
      use:['css-loader','style-loader']
    ]
  }，
  /* 代码省略 */
}

1.3 添加 css 资源

src/css/index.css

css

.box1 {
  width: 100px;
  height: 100px;
  background-color: red;
}

src/main.js

// 引入 Css 资源，Webpack才会对其打包
import "./css/index.css";

public/index.html

html

<!DOCTYPE html>
<html lang="en">
  <!-- 代码省略 -->
  <body>
    <!-- 准备一个使用样式的 DOM 容器 -->
    <div class="box1"></div>
    <!-- 引入打包后的js文件，才能看到效果 -->
    <script src="../dist/main.js"></script>
  </body>
</html>

2. Less 资源

2.1 安装依赖

shell

npm i less-loader -D

2.2 配置

webpack.config.js

module.exports = {
  /* 代码省略 */
  module:{
    rules:[
      test:/\.less$/,
      use:['css-loader','style-loader','less-loader']
    ]
  }，
  /* 代码省略 */
}

3. Sass 和 Scss 资源

sass-loader: 将 sass 文件编译成 css 文件
sass:sass-loader依赖sass编译

3.1 安装依赖

shell

npm i sass-loader sass -D

3.2 配置

webpack.config.js

module.exports = {
  /* 代码省略 */
  module:{
    rules:[
      test:/\.s[ac]ss$/,
      use:['css-loader','style-loader','sass-loader']
    ]
  }，
  /* 代码省略 */
}

4. styl 资源

4.1 安装依赖

shell

npm i stylus-loader -D

4.2 配置

webpack.config.js

module.exports = {
  /* 代码省略 */
  module:{
    rules:[
      test:/\.styl$/,
      use:['css-loader','style-loader','stylus-loader']
    ]
  }，
  /* 代码省略 */
}

图片资源

webpack4 中需要通过file-loader和url-loader进行处理，webpack5 中已内置

1. 配置图片

webpack.config.js

module.exports = {
  /* 代码省略 */
  module: {
    rules: [{ test: /\.(jpe?g|gif|png|wepb)$/, type: "asset" }],
  },
  /* 代码省略 */
};

2.图片资源优化

小于特定大小转换成 data url（base 64）格式

module.exports = {
  /* 代码省略 */
  module: {
    rules: [
      {
        test: /\.(gif|jpe?g|png|webp)$/,
        type: "asset",
        parser: {
          dataUrlContion: {
            maxSize: 10 * 1024, //小于10kb的图片转换为base64格式
          },
        },
        // 将图片以 [name].[hash:8][ext][query]命名输出到static/images目录下
        // [hash:8]取8位hash值; [ext]源文件扩展名; [query]添加之前的query参数
        generator: {
          filename: "static/images/[name].[hash:8][ext][query]",
        },
      },
    ],
  },
  /* 代码省略 */
};

优缺点：能够减少图片资源请求数量，但会增加 js 文件体积（影响不大）

字体图标

1. 配置字体

webpack.config.js

module.exports = {
  /* 代码省略 */
  module: {
    rules: [
      {
        test: /\.(ttf|woff2?)$/,
        type: "asset/resource",
        generator: { filename: "static/media/[hash:8][ext][query]" },
      },
    ],
  },
};

type: "asset/resource" : 相当于file-loader，将文件转换成 webpack 能够识别的模块，不做其他处理
type: "asset" : 相当于url-loader，将文件转换成 webpack 能够识别的模块，可以进行 data-url 操作

其它资源

一些音视频资源，直接往 asset/resource 中添加即可

1. 配置其它资源

webpack.config.js

module.exports = {
  /* 代码省略 */
  module: {
    rules: [
      {
        test: /\.(ttf|woff2?|map4|map3|avi)$/,
        type: "asset/resource",
        generator: {
          filename: "static/media/[hash:8][ext][query]",
        },
      },
    ],
  },
  /* 代码省略 */
};

js 资源

使用 babel 处理 js 兼容性问题；使用 eslint 统一代码格式

eslint

官网

1. 配置文件

配置文件写法有多种，eslint 会自动查找和读取，配置一个即可

根目录创建文件
- .eslintrc
- .eslintrc.js
- .eslintrc.json
package.json 中添加 eslintConfig，不需要创建文件

2. 具体配置

主要配置项：

module.exports = {
  // 解析选项
  parserOptions: {},
  // 具体检查规则
  rules: {},
  // 继承其他规则
  extends: [],
  // ...
};

parserOptions 解析选项

parserOptions: {
 ecmaVersion: 6, // ES 语法版本
 sourceType: 'module', // ES 模块化
 ecmaFeatures: {
  // ES 其他特性
  jsx: true, // 如果是 React 项目，就需要开启 jsx 语法
 },
},

rules 具体规则

关闭规则：off 或 0

开启规则

warn 或 1，使用警告级别的错误：warn (不会导致程序退出)
error 或 2，使用错误级别的错误：error (当被触发时，程序会退出)

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

extends 继承

继承已有规则，减轻自定义配置

// 例如在React项目中，我们可以这样写配置
module.exports = {
  extends: ["react-app"],
  rules: {
    // 自定义的规则会覆盖掉react-app的规则
    eqeqeq: ["warn", "smart"],
  },
};

3. 在 webpack 中使用

安装依赖
shell
```
npm i eslint-webpack-plugin eslint -D
```

定义配置文件.eslintrc.js

module.exports = {
  // 继承 Eslint 规则
  extends: ["eslint:recommended"],
  env: {
    node: true, // 启用node中全局变量
    browser: true, // 启用浏览器中全局变量
  },
  parserOptions: {
    ecmaVersion: 6,
    sourceType: "module",
  },
  rules: {
    "no-var": 2, // 不能使用 var 定义变量
  },
};

配置webpack.config.js

const path = require("path");
const EslintWebpackPlugin = require("eslint-webpack-plugin");
module.exports = {
  // ...
  plugins: [
    new EslintWebpackPlugin({
      // 指定检查文件目录
      context: path.resolve(__dirname, "src"),
    }),
  ],
  // ...
};

vscode 插件
- 安装 eslint 插件，不需要打包编译也可以提示错误信息
- 默认检查所有文件，项目根目录新建.eslintignore选择要忽视的文件
sh
```
# 忽视dist目录下的文件
dist
```

Babel

1. Babel 配置文件

有多种写法，babel 会自动查找读取，配置一个即可

根目录新建
- babel.config.js
- babel.config.json
根目录新建
- .babelrc
- .babelrc.js
- .babelrc.json
package.json 中添加 babel，无需新建文件

2. Babel 具体配置

babel.config.js

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

@babel/preset-env：允许使用最新的 JavaScript
@babel/preset-react：用来编译 react jsx 语法
@babel/preser-typescript：用来编译 typescript 语法

3. Babel 在 webpack 中使用

安装依赖

shell

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

定义配置文件 babel.config.js

module.exports = {
  presets: ["@babel/preset-env"],
};

配置webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.j$/,
        exclude: /node_modules/, //排除node_modules
        loader: "babel-loader",
      },
    ],
  },
  //...
};

html 资源

1，安装依赖

shell

npm i html-webpack-plugin -D

2. 配置

const path = requrie("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // ...
  module: {
    /* 代码省略 */
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 以public/index.html为模板生成文件
      // 该文件自动引入打包生成的js等资源
      template: path.resolve(__dirname, "public/index.html"),
    }),
  ],
  //...
};

修改输出资源路径和名称

1. 配置

module.exports = {
  //...
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js", //指定文件目录
  },
  module: {
    rules: [
      {
        test: /\.(gif|jpe?g|png|webp)$/,
        type: "asset",
        // 将图片以 [name].[hash:8][ext][query]命名输出到static/images目录下
        // [hash:8]取8位hash值; [ext]源文件扩展名; [query]添加之前的query参数
        generator: {
          filename: "static/images/[name].[hash:8][ext][query]",
        },
      },
    ],
  },
  //...
};

自动清空上次打包资源

1. 自动清空配置

const path = require("path");
module.exports = {
  // ...
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "static/js/main.js",
    clean: true, // 自动清除上次打包生成的文件
  },
  // ...
};

处理资源文件 ​

样式资源 ​

1. CSS 资源 ​

1.1 下载依赖 ​

1.2 配置 ​

1.3 添加 css 资源 ​

2. Less 资源 ​

2.1 安装依赖 ​

2.2 配置 ​

3. Sass 和 Scss 资源 ​

3.1 安装依赖 ​

3.2 配置 ​

4. styl 资源 ​

4.1 安装依赖 ​

4.2 配置 ​

图片资源 ​

1. 配置图片 ​

2.图片资源优化 ​

字体图标 ​

1. 配置字体 ​

其它资源 ​

1. 配置其它资源 ​

js 资源 ​

eslint ​

1. 配置文件 ​

2. 具体配置 ​

3. 在 webpack 中使用 ​

Babel ​

1. Babel 配置文件 ​

2. Babel 具体配置 ​

3. Babel 在 webpack 中使用 ​

html 资源 ​

1，安装依赖 ​

2. 配置 ​

修改输出资源路径和名称 ​

1. 配置 ​

自动清空上次打包资源 ​

1. 自动清空配置 ​

处理资源文件

样式资源

1. CSS 资源

1.1 下载依赖

1.2 配置

1.3 添加 css 资源

2. Less 资源

2.1 安装依赖

2.2 配置

3. Sass 和 Scss 资源

3.1 安装依赖

3.2 配置

4. styl 资源

4.1 安装依赖

4.2 配置

图片资源

1. 配置图片

2.图片资源优化

字体图标

1. 配置字体

其它资源

1. 配置其它资源

js 资源

eslint

1. 配置文件

2. 具体配置

3. 在 webpack 中使用

Babel

1. Babel 配置文件

2. Babel 具体配置

3. Babel 在 webpack 中使用

html 资源

1，安装依赖

2. 配置

修改输出资源路径和名称

1. 配置

自动清空上次打包资源

1. 自动清空配置