loader其實(shí)就是解析器，用來解析模塊的，前面說到過webpack只認(rèn)識(shí)js和json文件。配置方式如下：

• module.rules
• rules下放的是一個(gè)個(gè)的rule，一個(gè)rule對(duì)應(yīng)一種解析規(guī)則。rule是一個(gè)對(duì)象，可設(shè)置多個(gè)屬性：
  • test：對(duì)于模塊資源進(jìn)行匹配，通常使用正則表達(dá)式
  • use：
    • loader：必須有一個(gè)loader，對(duì)應(yīng)的值為一個(gè)字符串；
    • options：可選屬性，值為字符串或?qū)ο?，值?huì)被傳到loader中。
  • loader：rule.ues的簡寫。

處理css

css樣式

1. 安裝用來解析css的loader：npm i css-loader style-loader

2. 在webpack的配置文件中使用配置css的解析規(guī)則：

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

經(jīng)過上述操作我們就可以使用css了，下面進(jìn)行css使用的測試：

1. 在src下新建style目錄，并在目錄下編寫index.css文件。

   body,
   html {
     height: 100%;
     padding: 0px;
     margin: 0px;
   }
   
   #app {
     color: #1890FF;
     text-align: center;
     font-weight: 700;
     line-height: 100px;
   }
   

2. 在index.js文件中引入index.css。

   import './style/index.css'
   

3. 重新執(zhí)行npm run serve可以看到頁面的字體的樣式。（每次修改webpack的配置都需要重啟服務(wù)）

使用less

1. 安裝解析less的loader：npm i less less-loader

2. 編寫less解析的規(guī)則

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

使用postCSS

PostCSS是一個(gè)通過JavaScript來轉(zhuǎn)換樣式的工具；這個(gè)工具可以幫助我們進(jìn)行一些CSS的轉(zhuǎn)換和適配，比如自動(dòng)添加瀏覽器前綴、css樣式的重置；但是實(shí)現(xiàn)這些工具，我們需要借助于PostCSS對(duì)應(yīng)的插件。

如何使用PostCSS

1. 查找PostCSS在構(gòu)建工具中的擴(kuò)展，比如webpack中的postcss-loader
2. 選擇可以添加你需要的PostCSS相關(guān)的插件

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;**會(huì)被打包為：

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

postcss-preset-env

比autoprefixer更好用，可以把十六進(jìn)制八位轉(zhuǎn)為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的配置單獨(dú)抽出來。

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

@import樣式處理

在我們使用@import的時(shí)候，如果按照上述寫法配置webpack則不會(huì)讓postcss處理@import的CSS，因?yàn)槭峭ㄟ^js去先找到當(dāng)前的css由于@import是CSS語法，所以不會(huì)讓postCSS解析，下面這個(gè)配置可以讓其加載。

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

封裝style處理規(guī)則loader

因?yàn)殛P(guān)于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使用

1. 安裝file-loader：npm i file-loader
   文件的名稱規(guī)則

• [ext]： 處理文件的擴(kuò)展名；
• [name]：處理文件的名稱；
• [hash]：文件的內(nèi)容，使用MD4的散列函數(shù)處理，生成的一個(gè)128位的hash值（32個(gè)十六進(jìn)制）；
• [contentHash]：在file-loader中和[hash]結(jié)果是一致的（在webpack的一些其他地方不一樣，后面會(huì)講到）；
• [hash:]：截圖hash的長度，默認(rèn)32個(gè)字符太長了；
• [path]：文件相對(duì)于webpack配置文件的路徑；

2. 配置規(guī)則

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

url-loader

url-loader和file-loader的工作方式是相似的，但是可以將較小的文件，轉(zhuǎn)成base64的URI

• npm install url-loader -D
• 但是開發(fā)中我們往往是小的圖片需要轉(zhuǎn)換，但是大的圖片直接使用圖片即可
  • 這是因?yàn)樾〉膱D片轉(zhuǎn)換base64之后可以和頁面一起被請(qǐng)求，減少不必要的請(qǐng)求過程；
  • 而大的圖片也進(jìn)行轉(zhuǎn)換，反而會(huì)影響頁面的請(qǐng)求速度；
• 如何可以限制哪些大小的圖片轉(zhuǎn)換和不轉(zhuǎn)換
• url-loader有一個(gè)options屬性limit，可以用于設(shè)置轉(zhuǎn)換的限制

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

處理TS文件

• 可以通過TypeScript的compiler來轉(zhuǎn)換成JavaScript：npm install typescript -D
• 另外TypeScript的編譯配置信息我們通常會(huì)編寫一個(gè)tsconfig.json文件tsc --init
• 之后我們可以運(yùn)行 npx tsc來編譯自己的ts代碼：npx tsc

需要安裝全局的TypeScript環(huán)境，使用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使用文章來源地址http://www.zghlxwxcb.cn/news/detail-498699.html

到了這里，關(guān)于03-loader使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！