一. Webpack的Loader是什么
Loader是webpack的核心特性,借助Loader 就可以加载(打包)任何类型的资源。
webpack 只是打包平台,必须借助加载器来编译转换代码。
另:webpack 仅能处理 ES2015+中的 import 和 export, 对于其它 es6+ 的新特性是无额外处理的,额外处理需要babel-loader。
webpack 支持的模块加载方式(但在每个具体项目中,推荐只用一种模块规范!):
遵循 ES Modules 标准的 import 声明
遵循 CommongJS 标准的 require 函数
遵循 AMD 标准的 define 函数和 require 函数
* 样式代码中的 @import 指令和 url 函数
* HTML 代码中图片标签的 src 属性
二. 常用的Webpack Loader
| 常用的 webpack loader | 作用 |
|---|---|
| babel-loader | 加载 ES2015+ 代码,打包成使用 Babel 转译成的 ES5 |
| css-loader | 将css资源文件资源转换为js代码 (需要和 style-loader 一起使用) |
| style-loader | 将css资源转换成的js代码 以style标签的形式载入页面 |
| file-loader | 把文件(如图片,字体资源文件)发送到输出文件夹 |
| url-loader | 像 file loader 一样工作,但如果文件小于限制,可以打包为 data URL 到js代码中 (仅打包图片的话 url-loader 和 file-loader两者择一即可) |
更多webpack loader 参见webpack 文档: https://www.webpackjs.com/loaders/
上面常用 webpack Loader的使用方法,见 webpack.config.js :
module.exports = {
// ... 此处省略webpack.config.js文件其它部分
module: {
rules: [
{
test: /.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /.css$/, // 匹配 .css 文件
use: [ // 对匹配文件 从后到前 执行 loader
'style-loader', // 把 打包成的 js 代码,挂载到 Document
'css-loader', // 将 .css 文件打包为 js代码
]
},
// {
// test: /.jpeg$/,
// use: 'file-loader'
// },
{
test: /.jpeg$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024 // 10 KB
}
}
},
]
}
}
本文 完。
本文介绍了Webpack的Loader,它是Webpack的核心特性,借助它可加载任何类型资源。Webpack只是打包平台,需借助加载器编译转换代码,对于ES6+新特性还需babel-loader。还提及Webpack支持的模块加载方式,最后给出常用Loader参考文档及使用方法位置。

被折叠的 条评论
为什么被折叠?



