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可以查看官方文档