一.webpack基础

1.基础配置

webpack作品：打包，处理浏览器无法解析的文文件，兼容性处理，压缩，优化性能等等。

核心：

1. 入口
2. 出口
3. loader
4. plugin
5. mode

目录结构：

webpack_code # 项目根目录（所有指令必须在这个目录运行）
    └── src # 项目源码目录
        ├── js # js文件目录
        │   ├── count.js
        │   └── sum.js
        └── main.js # 项目主文件

下载依赖

//生成packjson依赖包：其中name不能为webpack
npm init -y

webpack依赖

npm i webpack webpack-cli -D

自带webpack只能处理js，css会报错，输出在dist文件。

2.基本配置

基本部分：

const path = require("path");

module.exports = {
  //入口
  entry: "./src/main.js",
  //出口
  ouput: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [],
  },
  Plugin: [],
  mode: "development", //开发模式
};

主要目标：1.编译 2.质量检查

3.处理样式资源

对于处理css资源来说。需要在main.js入口文件导入css，否则不会打包。

css需要loader处理：

npm i css-loader style-loader -D

下完loader依赖之后，进行loader配置。

 module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
    ],
  },

而对于sass，less，stylus等来说。需要在laode后面加一个less/sass-loader将之处理成css文件

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"],
      },
      {
        test: /.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
  plugins: [],
  mode: "development",
};

运行指令 npx webpack

处理图片资源

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

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

     {
        test: /.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },

打包后发现，dist 有三张打包后的资源。

• 为什么样式资源没有呢？

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

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

优点：减少请求数量 缺点：体积变大