本文主要说明Webpack的loader相关内容。
一 说明
webpack开箱即用只支持js和JSON两种文件类型,对其它css、img、less、ts等文件类型都是不支持的。loaders使得Webpack可以认识其它各种文件类型,并将它们转换成优先的js模块代码,并且可以添加到依赖图中。
Webpack本身是一个函数,接受源文件作为参数,返回转换结果。
二 基本语法
module: { rules: [ { test: /.css$/, use: [ 'style-loader', 'css-loader' ] } ] },
在你的应用程序中,有三种使用 loader 的方式:
详细参考Webpack官网:
https://www.webpackjs.com/concepts/loaders/
三 常用的loaders
3.1 babel-loader
转换ES6、ES7等JS新特性语法。
3.2 css-loader
Webpack不支持css文件的解析,通过css-loader支持.css文件的加载和解析。
3.3 less-loader
将less文件转换为css
3.4 ts-loader
将TS转测成js
3.5 file-loader
进行图片、字体 等的打包
3.6 raw-loader
首屏的资源可能需要内联,将文件以字符串的形式导入
3.7 thread-loader
正常情况下,Webpack是开一个进程。thread-loader将开启多进程打包js和css,提升打包速度。