webpack--loader

webpack的构建流程

• 初始化参数：从配置文件和 Shell 语句中读取与合并参数,得出最终的参数。
• 开始编译：用上一步得到的参数初始化 Compiler 对象,加载所有配置的插件,执行对象的 run - 方法开始执行编译。
• 确定入口：根据配置中的 entry 找出所有的入口文件。
• 编译模块：从入口文件出发,调用所有配置的 Loader 对模块进行翻译,再找出该模块依赖的模块,再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理。
• 完成模块编译：在经过第 4 步使用 Loader 翻译完所有模块后,得到了每个模块被翻译后的最终内容以及它们之间的依赖关系。
• 输出资源：根据入口和模块之间的依赖关系,组装成一个个包含多个模块的 Chunk,再把每个 Chunk 转换成一个单独的文件加入到输出列表,这步是可以修改输出内容的最后机会。
• 输出完成：在确定好输出内容后,根据配置确定输出的路径和文件名,把文件内容写入到文件系统。

一.安装

npm install webpack webpack-cli -D // 局部安装

二.loader

三.css-loader

npm install css-loader -D

四.style-loader

npm install style-loader -D

五.less-loader

npm install less less-loader --D

• importLoaders的数量默认是0，意思是一个加载器都不用，1的意思是用postcss-loader加载器，2的意思是用postcss-loaders和sass-loader加载器

• 这里的importLoaders: 2 是在css-loader 之后指定2个数量的loader（即 postcss-loader 和 less-loader）来处理import进来的资源

      {
        test: /.less$/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 2 // @import的css文件，回头能被前面的"less-loader"、"postcss-loader"处理
              // 0 => no loaders (default);
              // 1 => postcss-loader;
              // 2 => postcss-loader, sass-loader
            }
          },
          "postcss-loader",
          "less-loader"
        ]
      }

六.PostCss

• PostCSS是一个通过JavaScript来转换样式的工具；
• 这个工具可以帮助我们进行一些CSS的转换和适配，比如自动添加浏览器前缀、css样式的重置；
• 但是实现这些功能，我们需要借助于PostCSS对应的插件；

npm install postcss-loader postcss-preset-env --D

ppostcss-preset-env也是一个postcss的插件；

• 它可以帮助我们将一些现代的CSS特性，转成大多数浏览器认识的CSS，并且会根据目标浏览器或者运行时环境
  添加所需的polyfill；
• 也包括会自动帮助我们添加autoprefixer（所以相当于已经内置了autoprefixer）；

写法1：

写法2：

七.file-loader 图片处理(八. url-loader可以代替 这一步)

npm install file-loader -D

• file-loader的作用就是帮助我们处理import/require()方式引入的一个文件资源，并且会将它放到我们输出的文
  件夹中；

配置rule

八.设置文件名字 与 文件存放位置

1. 命名规则：

2.重构 图片输出的名字 和 位置

      {
        test: /.(jpe?g|png|gif|svg)$/,
        use: {
          loader: "file-loader",
          options: {
            name: "img/[name]_[hash:6][ext]",// img路径 + 图片本身名字 + hash6位数 + 文件扩展名
            outputPath: "img",// 输出路径
          }
        }
      }

九.url-loader(可以代替 第七步 file-loader)

npm install url-loader -D

1. 默认情况下所有图片都会被打包成 base64：
   
   

2. 但是开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可

• 这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
• 而大的图片也进行转换，反而会影响页面的请求速度；

3. 那么，我们如何可以限制哪些大小的图片转换和不转换呢

• url-loader有一个options属性limit，可以用于设置转换的限制；
• 下面代码，超过100k不会被转成base64

十.webpack5 处理图片 (可以代替 第九步和第七步)

asset module type --- 资源模块

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。

也就是说 如果是webpack5， 就不用下载 file-loader， url-loader了。因为里面自带

使用方法：

十一. 处理字体图标

方法1:

​webpack4,依旧可以通过(第七步) file-loader进行打包：

方法2:

通过 webpack5 的 asset module type --- 资源模块