03-loader使用

最新推荐文章于 2024-06-16 11:35:24 发布

coder_yihua

最新推荐文章于 2024-06-16 11:35:24 发布

阅读量825

点赞数

文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/weixin_45737062/article/details/131314749

版权

webpack 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

loader其实就是解析器，用来解析模块的，前面说到过webpack只认识js和json文件。配置方式如下：

module.rules
rules下放的是一个个的rule，一个rule对应一种解析规则。rule是一个对象，可设置多个属性：
- test：对于模块资源进行匹配，通常使用正则表达式
- use：
  - loader：必须有一个loader，对应的值为一个字符串；
  - options：可选属性，值为字符串或对象，值会被传到loader中。
- loader：rule.ues的简写。

处理css

css样式

安装用来解析css的loader：npm i css-loader style-loader

在webpack的配置文件中使用配置css的解析规则：

 module:{
    rules:[
      {
        test:/\.css$/,
        use:["style-loader","css-loader"]
      }
    ]
  }

经过上述操作我们就可以使用css了，下面进行css使用的测试：

在src下新建style目录，并在目录下编写index.css文件。

body,
html {
  height: 100%;
  padding: 0px;
  margin: 0px;
}

#app {
  color: #1890FF;
  text-align: center;
  font-weight: 700;
  line-height: 100px;
}

在index.js文件中引入index.css。
```
import './style/index.css'
```
重新执行npm run serve可以看到页面的字体的样式。（每次修改webpack的配置都需要重启服务）

使用less

安装解析less的loader：npm i less less-loader

编写less解析的规则

{
    test:/\.less$/,
    use:["style-loader","css-loader","less-loader"]
}

使用postCSS

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

如何使用PostCSS

查找PostCSS在构建工具中的扩展，比如webpack中的postcss-loader
选择可以添加你需要的PostCSS相关的插件

postcss-loader

在webpack中使用postcss就是使用postcss-loader来处理的；安装：npm install postcss-loader autoprefixer -D

rules:[
      {
        test:/\.css$/,
        use:["style-loader","css-loader",{
          loader:"postcss-loader",
          options:{
            postcssOptions:{
              plugins:[
                require("autoprefixer")
              ]
            }
          }
        }]
      }
]

比如：**user-select: none;**会被打包为：

#app{
    height:100%;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

postcss-preset-env

比autoprefixer更好用，可以把十六进制八位转为rgba。npm install postcss-preset-env -D

rules:[
      {
        test:/\.css$/,
        use:["style-loader","css-loader",{
          loader:"postcss-loader",
          options:{
            postcssOptions:{
              plugins:[
                require("postcss-preset-env")
              ]
            }
          }
        }]
      }
]

postcss.config.js

将postcss的配置单独抽出来。

module.exports = {
  plugins:[
    require('postcss-preset-env')
  ]
}

@import样式处理

在我们使用@import的时候，如果按照上述写法配置webpack则不会让postcss处理@import的CSS，因为是通过js去先找到当前的css由于@import是CSS语法，所以不会让postCSS解析，下面这个配置可以让其加载。

rules:[
      {
        test:/\.css$/,
        use:["style-loader",{
          loader:"css-loader",
          options:{
            importLoaders:1
          }
        },{
          loader:"postcss-loader",
          // 可以在postcss.config.js里面配置
          // options:{
          //   postcssOptions:{
          //     plugins:[
          //       require("autoprefixer")
          //     ]
          //   }
          // }
        }]
      }
]

封装style处理规则loader

因为关于style样式处理用相同的一部分，所以封装简写代码

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const getCssLoaders = (loaders = []) => ( ['style-loader', {
  loader: 'css-loader',
  options: {
    importLoaders: 1
  }
}, 'postcss-loader' , ...loaders])

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, './dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html'
    })
  ],
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.less$/,
        use: getCssLoaders([ 'less-loader'])
      },
      {
        test: /\.css$/,
        use: getCssLoaders()
      }
    ]
  }
}

处理图片svg资源

file-loader使用

安装file-loader：npm i file-loader
文件的名称规则

[ext]：处理文件的扩展名；
[name]：处理文件的名称；
[hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）；
[contentHash]：在file-loader中和[hash]结果是一致的（在webpack的一些其他地方不一样，后面会讲到）；
[hash:]：截图hash的长度，默认32个字符太长了；
[path]：文件相对于webpack配置文件的路径；

配置规则

{
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: "[name].[hash:6].[ext]",
              outputPath:'img'
            }
          }
        ]
 }

url-loader

url-loader和file-loader的工作方式是相似的，但是可以将较小的文件，转成base64的URI

npm install url-loader -D
但是开发中我们往往是小的图片需要转换，但是大的图片直接使用图片即可
- 这是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程；
- 而大的图片也进行转换，反而会影响页面的请求速度；
如何可以限制哪些大小的图片转换和不转换
url-loader有一个options属性limit，可以用于设置转换的限制

{
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: "img/[name].[hash:6].[ext]",
              limit: 100 * 1024
            }
          }
        ]
}

处理TS文件

可以通过TypeScript的compiler来转换成JavaScript：npm install typescript -D
另外TypeScript的编译配置信息我们通常会编写一个tsconfig.json文件tsc --init
之后我们可以运行 npx tsc来编译自己的ts代码：npx tsc

需要安装全局的TypeScript环境，使用npm i -g typescript ,可以使用tsc -V查看版本。

使用ts-loader

如果我们希望在webpack中使用TypeScript，那么我们可以使用ts-loader来处理ts文件：npm install ts-loader -D

 {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: "ts-loader"
  }

也可以使用@babel/tranform-typescript配合babel使用