webpack打包的時候只認識.js文件，但我們開發(fā)中肯定不僅僅只是js文件，如.html、.css、.jpg等，webpack提供了很多loader來打包不同類型的文件。

1. css-loader

對于加載css文件來說，我們需要一個可以讀取css文件的loader，這個loader最常用的是css-loader。

1.1 安裝

yarn add css-loader -D

1.2 使用

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 以.css文件結尾

        // 第一種寫法
        use: [
          {
            loader: 'css-loader',
          }
        ],

        // 第二種寫法
        loader: 'css-loader',

        //第三種寫法
        use: ['css-loader']

        // 第二種和第三種寫法最終都會被轉成第一種寫法
      }
    ]
  }
}

2. style-loader

css-loader只是負責將.css文件進行解析，并不會將解析之后的css插入到頁面中，如果我們希望再完成插入style的操作，那么我們還需要另外一個loader，就是style-loader。

2.1安裝

yarn add style-loader -D

2.2 使用

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 以.css文件結尾
        use: ['style-loader','css-loader']
      }
    ]
  }
}

*注意：因為loader的執(zhí)行順序是從右向左（或者說從下到上，或者說從后到前的），所以我們需要將styleloader寫到css-loader的前面。

其實style-loader做的事情很簡單，就是在動態(tài)創(chuàng)建了一個style標簽，把css-loader處理的css內容放到style標簽內，然后在插入到頁面的head標簽內。

image.png

3. less文件處理

3.1 使用less工具來完成文件的編譯轉換

安裝less工具將less文件轉為css文件。

yarn add less -D

3.2 less-loader處理

使用less-loader，來自動使用less工具轉換less到css
安裝

yarn add less-loader -D

使用

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: ['style-loader','css-loader', 'less-loader']
      }
    ]
  }
}

4. 瀏覽器兼容性

在這里可以查詢?yōu)g覽器的占有率。

4.1 認識browserslist工具

Browserslist是一個在不同的前端工具之間，共享目標瀏覽器和Node.js版本的配置

Autoprefixer
Babel
postcss-preset-env
eslint-plugin-compat
stylelint-no-unsupported-browser-features
postcss-normalize
obsolete-webpack-plugin

4.1.1 命令行使用browserslist

npx browserslist ">1%, last 2 version, not dead"

4.1.2 配置browserslist

方案一：在package.json中配置：

{

  "browserslist": [
    "last 2 version",
    "not dead",
    "> 0.2%"
  ]
}

方案二：在根目錄新建.browserslistrc文件

last 2 version
not dead
> 0.2%

方案一和方案二配置的條件都是or關系，如果要同時滿足條件用and

5 PostCSS工具

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

5.1 命令行使用postcss

yarn add postcss postcss-cli -D

可以在這里查詢到css樣式添加規(guī)則。
因為我們需要添加前綴，所以要安裝autoprefixer：

yarn add autoprefixer -D

命令行直接使用使用postcss工具，并且制定使用autoprefixer：

npx postcss --use autoprefixer -o result.css ./src/css/style.css

5.2 postcss-loader

在webpack中使用postcss就是使用postcss-loader來處理的。
安裝

 yarn add postcss-loader -D

配置
第一種方案：
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 以.css文件結尾
        use: ['style-loader','css-loader', {
          loader: 'postcss-loader',
          options: {
            postcssOptions: {
              plugins: [
                require('autoprefixer')
              ]
            }
          }
        }]
      }
    ]
  }
}

第二種：
也可以將plugin封裝出來，在根目錄新建postcss.config.js文件：

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

webpack.config.js

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 以.css文件結尾
        use: ['style-loader','css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader','css-loader', 'postcss-loader', 'less-loader']
      }
    ]
  }
}

5.3 postcss-preset-env

事實上，在配置postcss-loader時，我們配置插件并不需要使用autoprefixe，我們可以使用另外一個插件：postcss-preset-env。
postcss-preset-env也是一個postcss的插件，它可以幫助我們將一些現(xiàn)代的CSS特性，轉成大多數(shù)瀏覽器認識的CSS，并且會根據(jù)目標瀏覽器或者運行時環(huán)境添加所需的polyfill，也包括會自動幫助我們添加autoprefixer（所以相當于已經(jīng)內置了autoprefixer）。
安裝：

 yarn add postcss-preset-env -D

使用
將autoprefixer替換成postcss-preset-env就行了：

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

有些插件直接寫字符串就行，會自動requre：

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

5.4 css @import問題

問題復現(xiàn)：
假如main.js里面引入了src/index.css，而src/index.css里使用@import引入了src/test.css，就會出現(xiàn)src/test.css文件里的樣式不會被postcss所處理，這時候就需要配置：
webpack.config.js

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/, // 以.css文件結尾
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            importLoaders: 1 //后面有幾個插件就填寫幾
          }
        }, 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', {
          loader: 'css-loader',
          options: {
            importLoaders: 2 //后面有幾個插件就填寫幾
          }
        }, 'postcss-loader', 'less-loader']
      }
    ]
  }
}

6 其他資源處理

要處理jpg、png等格式的圖片，我們也需要有對應的loader：file-loader

6.1 file-loader

安裝

yarn add file-loader -D

配置
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        use: 'file-loader'
      }
    ]
  }
}

圖片資源加載方式：

require('xxx').default
import imgSource from 'xxx.png'

有時候我們處理后的文件名稱按照一定的規(guī)則進行顯示，比如保留原來的文件名、擴展名，同時為了防止重復，包含一個hash值等。這個時候我們可以使用PlaceHolders來完成，webpack給我們提供了大量的PlaceHolders來顯示不同的內容。
介紹幾個最常用的placeholder：

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

自定義圖片打包名字和輸出路徑：
webpack.config.js

const path = require('path')
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name]-[hash:6].[ext]',
            outputPath: 'images'
          }
        }
      }
    ]
  }
}

6.2 url-loader

url-loader和file-loader的工作方式是相似的，但是可以將較小的文件，轉成base64的URI。
安裝

yarn add url-loader -D

配置
和file-loader用法很相似

const path = require('path')
module.exports = {
 module: {
   rules: [
     {
       test: /\.(png|jpe?g|gif|svg)/,
       use: {
         loader: 'url-loader',
         options: {
           name: '[name]-[hash:6].[ext]',
           outputPath: 'images',
           limit: 100 * 1024 // byte, 只有小于100kb的才會轉成base64
         }
       }
     }
   ]
 }
}

7 用資源模塊類型（asset module type）

在webpack5之前，加載這些資源我們需要使用一些loader，比如raw-loader 、url-loader、file-loader，在webpack5之后，我們可以直接使用資源模塊類型（asset module type），來替代上面的這些loader。
注意： asset module type打包的圖片資源如果用require不需要.detault

7.1 asset/resource

asset/resource 發(fā)送一個單獨的文件并導出 URL。之前通過使用 file-loader 實現(xiàn)。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        type: 'asset/resource'
      }
    ]
  }
}

自定義輸出文件和文件名
webpack5的[ext]已經(jīng)包含了.
第一種寫法：
這種寫法包含所有的assetModule的定義，不推薦。
webpack.config.js

module.exports = {
  output: {
    assetModuleFilename: 'img/[name]-[hash:6][ext]'
  }
}

第二種寫法：
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        type: 'asset/resource',
        generator: {
          filename: 'images/[name]-[hash:6][ext]'
        }
      }
    ]
  }
}

7.2 asset/inline

asset/inline 導出一個資源的 data URI。之前通過使用 url-loader 實現(xiàn)。
webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        type: 'asset/inline',
      }
    ]
  }
}

7.3 asset

asset可以實現(xiàn)url-loader的limit效果。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)/,
        type: 'asset',
        generator: {
          filename: 'images/[name]-[hash:6][ext]'
        },
        parser: {
          dataUrlCondition: {
            maxSize: 20 * 1024 //byte
          }
        }
      }
    ]
  }
}

8 加載字體文件

我們可以選擇使用file-loader來處理，也可以選擇直接使用webpack5的資源模塊類型來處理。

module.exports = {
  module: {
    rules: [
      {
        test: /\.(woff2?|eot|ttf)$/,
        type: 'asset/resource',
        generator: {
          filename: 'font/[name]-[hash:6][ext]'
        },
      }
    ]
  }
}

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

二、webpack的loader配置

二、webpack的loader配置

1. css-loader

1.1 安裝

1.2 使用

2. style-loader

2.1安裝

2.2 使用

3. less文件處理

3.1 使用less工具來完成文件的編譯轉換

3.2 less-loader處理

4. 瀏覽器兼容性

4.1 認識browserslist工具

4.1.1 命令行使用browserslist

4.1.2 配置browserslist

5 PostCSS工具

5.1 命令行使用postcss

5.2 postcss-loader

5.3 postcss-preset-env

5.4 css @import問題

6 其他資源處理

6.1 file-loader

6.2 url-loader

7 用資源模塊類型（asset module type）

7.1 asset/resource

7.2 asset/inline

7.3 asset

8 加載字體文件

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

二、webpack的loader配置

1. css-loader

1.1 安裝

1.2 使用

2. style-loader

2.1安裝

2.2 使用

3. less文件處理

3.1 使用less工具來完成文件的編譯轉換

3.2 less-loader處理

4. 瀏覽器兼容性

4.1 認識browserslist工具

4.1.1 命令行使用browserslist

4.1.2 配置browserslist

5 PostCSS工具

5.1 命令行使用postcss

5.2 postcss-loader

5.3 postcss-preset-env

5.4 css @import問題

6 其他資源處理

6.1 file-loader

6.2 url-loader

7 用資源模塊類型（asset module type）

7.1 asset/resource

7.2 asset/inline

7.3 asset

8 加載字體文件

相關閱讀更多精彩內容

友情鏈接更多精彩內容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av