webpack-loader的使用

  • 开发
  • 13

引入css后执行打包命令 "build": "npx webpack --config wk.config.js"发现报错：
在这里插入图片描述
在这里插入图片描述在这里插入图片描述

webpack默认只能处理js其他的像css,图片都需要借助loader来处理

css-loader

loader可以用于对模块的源代码进行转换，可以把css看成一个模块，模块可以通过import来加载，但是在加载模块时，webpack不知道如何对其进行加载，需要特定的loader完成这个功能。
npm i css-loader -D

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [{loader:"css-loader"}],
      },
    ],
  },
};

module.rules中允许我们配置多个loader.。rules对应的值是一个数组[rule],数组中存放多个rule,rule是一个对象，有多个属性：
test:用于对资源进行匹配，通常会设置成正则表达式
use:对应的值是一个数组[useEntry] useEntry是一个数组也有一些属性

  1. loader:必须要一个loader属性，对应的值是一个字符串。只有一个loader时可以简写 例如use:[“css-loader”]
  2. options:可选的属性,只是一个字符串或对象
  3. query：目前已经被options给替代
    loader: use:[loader]的简写， 只有一个loader时也可以简写 loader:“css-loader”

简写：

//原来写法
 module: {
    rules: [
      {
        test: /\.css$/,
        use: [{loader:"css-loader"}],
      },
    ],
// 简写1
 module: {
    rules: [
      {
        test: /\.css$/,
        loader:"css-loader"
      },
    ],
  },
// 简写2
   module: {
    rules: [
      {
        test: /\.css$/,
        use:["csss-loader"]
      },
    ],
  },

style-loader

css-loader只能解决不报错的问题,但是css样式并没有生效。这是因为css-loader只负责解析css，不会将解析后的css插入到页面中，需要通过style-loader把样式插入到页面中。
npm i style-loader -D


const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};
// use: ["style-loader", "css-loader"], 也可以写成   use: [{ loader: "css-loader" }, { loader: "css-loader" }],

loader的执行顺序是从后往前执行的
在index.html中引入打包后的文件，就可以在页面中看到效果
在这里插入图片描述

sass-loader 解析sass

npm i sass-loader -D

编写sass并引入文件

在这里插入图片描述

配置sass-loader

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
    ],
  },
};

postcss-loader

PostCSS是一个用JavaScript插件转换CSS的工具。它可以帮助开发人员处理CSS，包括自动添加浏览器前缀、CSS变量、嵌套规则、函数等
npm i postcss-loader -D
以 autoprefixer （会添加一些浏览器的前缀）为例

.在这里插入图片描述
由于postcss-loader有很多配置项，所以使用对象的形式：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: ["autoprefixer"],
                //也有这种写法plugins: [require("autoprefixer")],现在可以省略require()
              },
            },
          },
        ],
      },
    ],
  },
};

结果：
在这里插入图片描述
由于postcss配置项太多，postcss通常单独抽离出一个文件postcss.config.js:
在这里插入图片描述
在webpack中就可以简写了：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
    ],
  },
};

“autoprefixer"只能自动添加浏览器前缀，postcss还有其他功能，因此实际开发中并不会安装"autoprefixer”,而是使用 postcss-preset-env它可以将一些现代的css特性转换为浏览器所识别的特性。npm i postcss-preset-env -D
在这里插入图片描述

处理资源模块

在webpack5之前 加载这些资源需要使用一些loader，例如raw-loader,url-loader等。
在webpack5之后，可以直接使用资源模块类型(asset module type)来代替上面这些loader。

资源模块的类型分为 asset/resource ,asset/inline,asset/source,asset。

asset/resource:发送一个单独的文件并导出url(之前通过file-loader来),如果有两个图片，在打包后会生成两个文件，这就意味着还要发送额外的请求。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/resource",
      },
    ],
  },
};

这里要注意图片也要当作一个模块来导入
在这里插入图片描述
执行命令后可以看到打包后的结果：
在这里插入图片描述

asset/inline：将图片进行base64编码，并把编码后的源码打包到js文件中。会造成js文件非常大，下载和解析js文件需要的时间长。

onst path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/inline",
      },
    ],
  },
};

打包后的js文件
在这里插入图片描述
这里还加了一个背景图.bgi { background-image: url(../asset/1.png); } img和background-image的url都是base64格式的
在这里插入图片描述
asset/source：是将图片的源码打包到js文件中和asset/inline一样会造成js文件过大。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,。
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset/source",
      },
    ],
  },
};

在这里插入图片描述
asset:可以根据需要生成一个单独的文件，或打包到js中。

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
      },
    ],
  },
};

一般type会设置为asset，将较小的文件进行base64编码，较大的文件单独打包。

根据文件大小打包

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
      },
    ],
  },
};

//webpack官网:https://www.webpackjs.com/configuration/module/#ruleparserdataurlcondition
// 如果一个模块源码大小小于 maxSize，那么模块会被作为一个 Base64 编码的字符串注入到包中， 否则模块文件会被生成到输出的目标目录中。
//dataUrlCondition 还可以写成函数的形式

在这里插入图片描述

对打包后的文件名，文件目录进行操作

可以在output中对打包后生成的文件进行操作，比如修改文件名。但是在这里修改会影响所有的文件，不推荐在这里修改。

// 这里也是可以支持[hash][ext][query]的
const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
    assetModuleFilename: "aa.png",
  },
  module: {
    rules: [ ],
  },
};

应该针对对应的文件修改：

const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
        generator: {
          filename: "img/[hash][ext]",
        },
      },
    ],
  },
};
// webpack官网：https://www.webpackjs.com/configuration/module/#rulegeneratorfilename
//这里其实还可以控制生成的hash值的长度 img/[hash:8][ext]

在这里插入图片描述

到目前为止所有的代码

//webpack
const path = require("path");
module.exports = {
  entry: "./src/main.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "./build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.scss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
        generator: {
          filename: "img/[hash][ext]",
        },
      },
    ],
  },
};


//postcss.config.js
module.exports = {
  plugins: ["postcss-preset-env"],
};
阅读全部

相关推荐

  6. webpack里面loader的配置

    2024-04-13 01:46:03       13 阅读

  7. Webpack的Loader和Plugin

    2024-04-13 01:46:03       16 阅读

  8. webpack为什么要使用loader，如何手写loader

    2024-04-13 01:46:03       17 阅读

  9. webpack的plugin和loader的区别

    2024-04-13 01:46:03       35 阅读

  10. webpack常见的loader和plugin

    2024-04-13 01:46:03       37 阅读

最近更新

  4. TCP协议是安全的吗?

    2024-04-13 01:46:03       16 阅读

  12. 阿里云服务器执行yum，一直下载docker-ce-stable失败

    2024-04-13 01:46:03       16 阅读

  13. 【Python教程】压缩PDF文件大小

    2024-04-13 01:46:03       15 阅读

  18. 通过文章id递归查询所有评论（xml）

    2024-04-13 01:46:03       18 阅读

热门阅读

  3. SpringFramework实战指南（八）

    2024-04-13 01:46:03       10 阅读

  4. springboot项目如何配置跨域？

    2024-04-13 01:46:03       13 阅读

  5. 关于pr的第一次听写的笔记

    2024-04-13 01:46:03       16 阅读

  8. 数据结构-树状数组

    2024-04-13 01:46:03       13 阅读

  9. 【蓝桥杯-牛客冲刺题单】

    2024-04-13 01:46:03       21 阅读

  11. 动态规划(Dynamic Programming)详解

    2024-04-13 01:46:03       13 阅读

  12. iframe嵌入Vue页面实现免登方法

    2024-04-13 01:46:03       15 阅读

  14. 什么是感知器 怎么学习感知器

    2024-04-13 01:46:03       13 阅读

  15. 2、ipex-llm(原bigdl-llm)应用聊天

    2024-04-13 01:46:03       13 阅读

  16. Vue3：自定义响应式数据-customRef（面试常问，重点！！！）

    2024-04-13 01:46:03       17 阅读

  19. P2678 [NOIP2015 提高组] 跳石头

    2024-04-13 01:46:03       12 阅读

  21. Golang 为什么需要用反射

    2024-04-13 01:46:03       13 阅读

  27. Leetcode56_合并区间

    2024-04-13 01:46:03       14 阅读

  29. 解决electron 内购inAppPurchase.getProducts获取列表为空的问题

    2024-04-13 01:46:03       17 阅读