zoukankan      html  css  js  c++  java
  • webpack--loader

    webpack的构建流程

    image

    • 初始化参数:从配置文件和 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之后可以和页面一起被请求,减少不必要的请求过程;
    • 而大的图片也进行转换,反而会影响页面的请求速度;
    1. 那么,我们如何可以限制哪些大小的图片转换和不转换呢
    • 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 --- 资源模块

  • 相关阅读:
    UVa 12174 (滑动窗口) Shuffle
    UVa 1607 (二分) Gates
    CodeForces ZeptoLab Code Rush 2015
    HDU 1525 (博弈) Euclid's Game
    HDU 2147 (博弈) kiki's game
    UVa 11093 Just Finish it up
    UVa 10954 (Huffman 优先队列) Add All
    CodeForces Round #298 Div.2
    UVa 12627 (递归 计数 找规律) Erratic Expansion
    UVa 714 (二分) Copying Books
  • 原文地址:https://www.cnblogs.com/cl1998/p/15285418.html
Copyright © 2011-2022 走看看