webpack學習之路（五）loader初識及經常使用loader介紹

咱們知道webpack自己只能解析js文件，可是咱們的項目中確定會有html,css,圖片等其餘文件類型，這個時候咱們就須要loader幫咱們把這些文件轉化成webpack可以處理的有效模塊。

什麼是loader?

loader 用於對模塊的源代碼進行轉換。loader 可使你在 import 或"加載"模塊時預處理文件。所以，loader 相似於其餘構建工具中「任務(task)」，並提供了處理前端構建步驟的強大方法。K 能夠將文件從不一樣的語言（如 TypeScript）轉換爲 JavaScript，或將內聯圖像轉換爲 data URL。loader 甚至容許你直接在 JavaScript 模塊中 import CSS文件！

loader自己就是一個函數，接收源代碼爲入參，輸出編譯過以後代碼。

使用loader

最常使用的是在webpack.config.js裏指定loader webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
複製代碼

test設置文件匹配規則

use指定使用loader

options爲使用loader的配置項

注意：loader的執行順序是從右向左依次執行

經常使用的loader

ok，咱們來看下經常使用的一些loader使用

解析es6

使用babel-loader，它依賴babel，因此須要配置文件.babelrc

而對ES6的解析，咱們只須要在.babelrc加上以下配置便可：

{
  "presets": [
    "@babel/preset-env"
  ]
}
複製代碼

接着配置下webpack.config.js

module: {
    rule: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: '/node_modules/'
      }
    ]
  }
複製代碼

解析JSX

也是使用babel-loader
首先要在.babelrc增長react的解析配置：

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}
複製代碼

webpack.config.js同上

解析css

使用css-loader和style-loader
css-loader用於加載.css文件，而且轉換成commonJs對象
style-loader將樣式經過<style>標籤插入到head中
咱們先安裝一下

配置webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader']
      }
    ]
  }
複製代碼

解析less和sass

less使用less-loader
sass使用sass-loader

這兩個loader都是先將文件轉換成css，而後經過css-loader和style-loader輸出到頁面

webpack.config.js

module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'less-loader']
      }
    ]
  }
複製代碼

解析圖片

1.file-loader webpack.config.js

module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['file-loader']
      }
    ]
  }
複製代碼

2.url-loader url-loader功能和file-loader差很少，多了一個小資源轉base64的功能

webpack.config.js

module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 10240
            }
        }]
      }
    ]
  }
複製代碼

limit就是對轉換尺寸的限制。

連接文章

webpack學習之路（四）webpack-hot-middleware實現熱更新

webpack學習之路（三）webpack-dev-middleware

webpack學習之路（二）webpack-dev-server實現熱更新

webpack學習之路（一）基礎配置

I am moving forward.