Webpack 常用的loader与用法

目录

• loaders
  • webpack 中常用的 loaders
  • loaders 的用法

 

loaders

webpack 开箱即用，但是 webpack 只支持 js 和 json 文件类型，不支持其他的文件(比如 html,css,字体等)
loader 可以支持其他文件类型并把它们转换成有效的模块，文件被 loaders 解析完之后才可以加到依赖图中
loader 本身是一个函数，接受源文件作为参数，并返回转换的结果

webpack 中常用的 loaders

• babel-loader:转换 ES6-ES7 等 js 新特性语法
• css-loader: 支持.css 文件的加载和解析
• less-loader: 将 less 文件转换成 css
• ts-loader: 将 ts 转换成 js
• file-loader: 进行图片、字体、富媒体的打包
• raw-loader: 首屏静态资源内联，将文件以字符串的形式导入
• thread-loader: webpack 默认单进程打包，thread 多进程打包 js 和 css,打包速度更快

loaders 的用法

把loaders放在 module 的 rules 数组中通过以下属性设置配置

• test: 正则表达式，用于设置匹配规则
• use: 指定使用的loader名称，如'raw-loader'。在use中如果有多个loader,那么倒序执行,相当于compose(组合)

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