webpack之常用loader的配置和使用

概述

loader解析器主要用於預處理項目代碼，並最終轉換為可打包的文件格式（js,css,標准資源文件等）

常用的幾個Loader

babel-loader

• 參考文檔
• 主要用於在舊的瀏覽器或環境中將 ECMAScript 2015+ 代碼轉換為向后兼容版本的 JavaScript 代碼(摘抄自babel官網)

安裝

$ npm i babel-loader -D

配置

module.exports = {
    module: {
        rules: [
          {
            test: /\.js$/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['es2015'] // 轉換es2015風格代碼
                }
            }],
            exclude: /node_modules/
          }
        [
    }
}

css-loader

• 參考文檔
• 用於解析使用@import和url()引入的樣式

安裝

$ npm i css-loader -D

配置

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

eslint-loader

• 參考文檔
• 檢查代碼格式
• 使用該插件時還需要添加兩個配置文件 .eslintrc.js和.babelrc(用於兼容node(eg. require())、web(eg. windows)、webpack（eg. import()...）中使用的各種語法和配置代碼風格)

安裝

$ npm i eslint-loader -D

配置

module.exports = {
  module: {
    rules: [{
      test: /\.less$/,
      loader: 'less-loader' // 將 Less 編譯為 CSS
    }]
  }
}

less-loader

• 參考文檔
• 用於解析使用@import和url()引入的樣式

安裝

$ npm i less-loader -D

配置

module.exports = {
  module: {
    rules: [{
      test: /\.less$/,
      use: [{
        loader: 'style-loader' // creates style nodes from JS strings
      }, {
        loader: 'css-loader' // translates CSS into CommonJS
      }, {
        loader: 'less-loader' // compiles Less to CSS
      }]
    }]
  }
}

file-loader

• 參考文檔
• 將資源作為一個文件，生成到輸出目錄，不進行額外處理

安裝

$ npm i file-loader -D

配置

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

備注

• 更多Loader可以查看官方文檔