Webpack 12个常用Loader详解与配置指南

作者：编译时光时间：2026-10-24 09:11:30浏览：294

本文系统整理了Webpack构建流程中12个核心Loader的使用方法，涵盖CSS样式注入、Sass编译、PostCSS自动前缀、ES6转ES5、TypeScript解析、HTML及图片资源处理，以及Vue单文件组件和代码规范检查。通过具体安装命令与配置示例，帮助前端开发者快速掌握不同场景下的Loader选型与配置技巧。

前言

本文旨在整理一系列常用的Loader，帮助开发者明确在不同场景下如何选择和使用相应的Loader。本文主要面向前端初级开发人员，资深开发者可自行略过。

style-loader

style-loader的作用是将编译后的CSS样式注入到页面的<style>标签中。需要注意的是Loader的执行顺序，因为Loader是从下往上执行的，所以style-loader必须放在配置列表的第一位，以确保最终样式能正确挂载到页面。


cnpm i style-loader -D

配置方法如下：


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

css-loader

css-loader用于识别和处理.css文件。它必须与style-loader配合使用，仅安装css-loader无法使样式生效。


cnpm i css-loader style-loader -D

配置示例如下：


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

sass-loader

sass-loader是一个CSS预处理器，在项目中广泛使用，能极大简化CSS的编写过程。


cnpm i sass-loader@5.0.0 node-sass -D

在index.js中引入样式文件：


import "index.scss"

index.scss
body {
 font-size: 18px;
 background: red;
}

webpack.config.js配置如下：


module.exports = {
 module: {
  rules: [
   {
    test: /\.scss$/,
    use: [
     "style-loader",
     "css-loader",
     "sass-loader"
    ],
    include: /src/, 
   },
  ]
 }
}

postcss-loader

postcss-loader用于自动补充CSS样式的浏览器内核前缀，无需手动编写，使用非常便捷。


cnpm i postcss-loader autoprefixer -D

配置postcss.config.js文件：

如果不使用独立配置文件，也可以将配置项直接写在postcss-loader的options中，两者效果相同。


module.exports = {
 plugins: [
  require("autoprefixer")({
   overrideBrowserslist: ["> 1%", "last 3 versions", "ie 8"]
  })
 ]
}

属性	描述
> 1%	全球超过1%人使用的浏览器
> 5% in CN	指定国家使用率覆盖
last 2 versions	所有浏览器兼容到最后两个版本根据CanIUse.com追踪的版本
Firefox ESR	火狐最新版本
Firefox > 20	指定浏览器的版本范围
not ie <=8	方向排除部分版本
Firefox 12.1	指定浏览器的兼容到指定版本

在webpack.config.js中整合配置：


module.exports = {
 module: {
  rules: [
   {
    test: /\.scss$/,
    use: [
     "style-loader",
     "css-loader",
     "sass-loader",
    "postcss-loader"
    ],
    include: /src/, 
   },
  ]
 }
}

babel-loader

babel-loader用于将ES6+语法转换为ES5语法，以兼容旧版浏览器。


cnpm i babel-loader @babel/core @babel/preset-env -D

babel-loader是使Babel与Webpack协同工作的模块。
@babel/core是Babel编译器的核心模块。
@babel/preset-env是Babel官方推荐的预置器，可根据用户环境自动添加所需的插件和补丁来编译ES6代码。

webpack.config.js配置示例：


module.exports = {
 module: {
  rules: [
   {
    test: /\.js$/,
    use: {
     loader: "babel-loader",
     options: {
      presets: [
       ['@babel/preset-env', { targets: "defaults"}]
      ]
     }
    }
   },
  ]
 }
}

ts-loader

ts-loader用于配置项目中的TypeScript支持。


cnpm i ts-loader typescript -D

仅配置ts-loader不会完全生效，它主要负责编译和识别.ts文件，主要配置文件需在tsconfig.json中指定。


module.exports = {
 module: {
  rules: [
   {
    test: /\.ts$/,
    use: "ts-loader"
   },
  ]
 }
}

tsconfig.json配置示例：


{
 "compilerOptions": {
  "declaration": true,
  "declarationMap": true, // 开启map文件调试使用
  "sourceMap": true,
  "target": "es5", // 转换为Es5语法
 }
}

webpack.config.js配置如下：


module.exports = {
 entry: "./src/index.ts",
 output: {
  path: __dirname + "/dist",
  filename: "index.js",
 },
 module: {
  rules: [
   {
    {
     test: /\.ts$/,
     use: "ts-loader",
    }
   }
  ]
 }
}

html-loader

html-loader用于将HTML页面代码片段引入并赋值给DOM元素内容。


cnpm i html-loader@0.5.5 -D

建议安装低版本，高版本可能存在兼容性问题导致报错。本文示例使用0.5.5版本。


import Content from "../template.html"

document.body.innerHTML = Content

webpack.config.js
module.exports = {
 module: {
  rules: [
   {
    test: /\.html$/,
    use: "html-loader"
   }
  ]
 }
}

file-loader

file-loader用于处理jpg、png等图片资源，返回值以publicPath为准。


cnpm i file-loader -D

在index.js中引入图片：


import img from "./pic.png"
console.log(img) // https://www.baidu.com/pic_600eca23.png

webpack.config.js配置如下：


module.exports = {
 module: {
  rules: [
   {
    test: /\.(png|jpg|jpeg)$/,
    use: [
     {
      loader: "file-loader",
      options: {
       name: "[name]_[hash:8].[ext]",
       publicPath: "https://www.baidu.com" 
      }
     }
    ]
   }
  ]
 }
}

url-loader

url-loader同样用于处理图片资源，但与file-loader不同，它可以根据图片大小执行不同操作。如果图片大小超过指定阈值，则打包资源；否则将图片转换为base64字符串并合并到JS文件中。


cnpm i url-loader -D

在index.js中引入图片：


import img from "./pic.png"

webpack.config.js配置如下：


module.exports = {
 module: {
  rules: [
   {
    test: /\.(png|jpg|jpeg)$/,
    use: [
     {
      loader: "url-loader",
      options: {
       name: "[name]_[hash:8].[ext]",
       limit: 10240, // 这里单位为(b) 10240 => 10kb
       // 这里如果小于10kb则转换为base64打包进js文件，如果大于10kb则打包到dist目录
      }
     }
    ]
   }
  ]
 }
}

html-withimg-loader

在编译图片时，通常使用file-loader和url-loader，但它们只查找JS文件中的图片资源。若需打包HTML中的图片，需使用html-withimg-loader。


cnpm i html-withimg-loader -D

在index.html中引用图片：


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>首页</title>
</head>
<body>
 <h4>我蛙人</h4>
 <img src="./src/img/pic.jpg" alt="">
</body>
</html>

webpack.config.js配置如下。如果打包后img的src路径显示为[Object Module]，可尝试以下解决方案：

将file-loader降级至4.2.0版本。
修改options参数，将esModule设置为false。


module.exports = {
 module: {
  rules: [
   {
    test: /\.(png|jpg|jpeg)$/,
    use: {
     loader: "file-loader",
     options: {
      name: "[name]_[hash:8].[ext]",
      publicPath: "http://www.baidu.com",
      esModule: false
     }
    }
   },
   {
    test: /\.(png|jpeg|jpg)/,
    use: "html-withimg-loader"
   }
  ]
 }
}

vue-loader

vue-loader用于编译.vue文件。例如在搭建Vue项目时使用，此处仅作简要介绍。


cnpm i vue-loader@15.7.0 vue vue-template-compiler -D

vue-loader用于识别.vue文件。
vue模块用于识别和支持Vue语法。
vue-template-compiler是语法模板渲染引擎，负责处理{{}}、template、script和style。

在main.js中引入Vue：


import App from "./index.vue"
import Vue from 'Vue'
new Vue({
 el: "#app",
 render: h => h(App) 
})

在index.vue中编写组件：


<template>
 <div class="index">
 {{ msg }}
 </div>
</template>

<script>
export default {
 name: 'index',
 data() {
 return {
  msg: "hello 蛙人"
 }
 },
 created() {},
 components: {},
 watch: {},
 methods: {}
}
</script>
<style scoped>

</style>

webpack.config.js配置如下：


const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
 entry: "./src/main.js",
 output: {
  path: __dirname + "/dist",
  filename: "index.js",
 },
 module: {
  rules: [
   {
    test: /\.vue$/,
    use: "vue-loader"
   }
  ]
 },
 plugins: [
  new VueLoaderPlugin()
 ]
}

eslint-loader

eslint-loader用于检查代码是否符合规范，并检测语法错误。


cnpm i eslint-loader eslint -D

在index.ts中编写代码：


var abc:any = 123;
console.log(abc)

.eslintrc.js配置文件，此处列出部分规则：


module.exports = {
 root: true, 
 env: {
  browser: true,
 },
 rules: {
  "no-alert": 0, // 禁止使用alert
  "indent": [2, 4], // 缩进风格
  "no-unused-vars": "error" // 变量声明必须使用
 }
}

webpack.config.js配置如下：


module.exports = {
 module: {
  rules: [
   {
    test: /\.ts$/,
    use: ["eslint-loader", "ts-loader"],
    enforce: "pre",
    exclude: /node_modules/
   },
   {
    test: /\.ts$/,
    use: "ts-loader",
    exclude: /node_modules/
   }
  ]
 }
}