Webpack中的 Loader
一、什么是loader
- 1.从webpack本身来说，主要是用作处理我们写的js代码，并且webpack会处理js之间的依赖。
- 2.但是，在开发中我们不仅仅有基本的js代码处理，我们也需要加载css,图片，也包括一些高级的ES6转成ES5代码，将TypesScript代码庄臣ES5代码，将scss,less，转成css，将.jsx,.vue文件转成js文件等等。
- 3.对于 webpack本身的能力来说，对于这些转化是不支持的。这时候我们就可以给webpack扩展对应的loader就可以了。loader让webpack能够去处理其他类型的文件，并将他们装换为有效模块，以供应用程序使用。以及添加到依赖图中。
二、loader的使用
步骤一： 通过npm安装需要使用的loader
步骤二： 在webpack.config.js中的modules关键字进行配置
注意点： 一些资源转换会用到多个loader配置,这时要注意loader的书写顺序,loader按照从右到左
三、loader的特性
- 1.loader 可以通过 options 对象配置
- 2.loader 支持链式传递,链中的每个 loader 会将转换应用在已处理过的资源上
- 3.loader 也可以内联显示指定
- 4.loader 可以是同步的，也可以是异步的
- 5.除了常见的通过 package.json 的 main 来将一个 npm 模块导出为 loader，还可以在 module.rules 中使用 loader 字段直接引用一个模块
- 6.loader 运行在 Node.js 中，并且能够执行任何 Node.js 能做到的操作
- 7.loader 能够产生额外的任意文件
- 8.loader 从右到左地取值(evaluate)/执行(execute)
四、常用的几种loader处理样式资源
1.style-loader
(1)安装
npm i style-loader -D
2.css-loader
分析 css 模块之间的关系，并合成⼀个 css
(1)安装
npm i css-loader -D
(2)webpack.config.js中的配置
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader'] },
}
]
注意点:使用了css-loader配置 还添加了style-loader
3.raw-loader
(1)安装
npm install --save-dev raw-loader
(2)src下的index.js中引入
import aaa from './data/aaa.txt';
console.log(aaa);
console.log('123')
(3)在webpack.config.js中进行配置
module.exports = {
module: {
rules: [
{
test: /\.(txt|md)$/,
use: 'raw-loader'
}
]
}
}
4.sass-loader
sass 语法转换成 css ，依赖 node-sass 模块
(1)安装
npm install --save-dev sass-loader node-sass
(2)在webpack.config.js中进行配置
// webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.scss$/,
use: [{
loader: "style-loader"
// 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader"
// 将 CSS 转化成 CommonJS 模块
}, {
loader: "sass-loader"
// 将 Sass 编译成 CSS
}]
}]
}
};
注意点： loader 可以同时挂载多个，处理顺序为：从右到左，也就是先通过 css-loader 处理，然后把处理后的 css 字符串交给 style-loader 进行处理
5.html-loader
注意点:html-loader和url-loader的区别在于:url-loader处理css样式中的图片资源,html-loader处理html中的img标签
(1)安装
npm i html-loader -D
(2)webpack.config.js
rules: [
//若前面使用 url-loader 解析式图片地址会出现[object Modlue ]问题,
//这时需关闭 url-loader,使用options:{esModule:false}
{test:/\.html$/,loader:'html-loader',options:{esModule:false}}
]
6.url-loader
注意点： 可以处理file-loader所有的事情, url-loader依附于file-loader 先下载file-loader
(1)安装
npm i url-loader -D
(2)在webpack.config.js中进行配置
rules: [
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "url-loader",
options: {
// placeholder 占位符 [name] 源资源模块的名称
// [ext] 源资源模块的后缀
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images"
// 打包后文件的 url
publicPath: './images',
// 小于 100 字节转成 base64 格式
limit: 100
}
}
}
]
7.file-loader
(1)安装
npm install --save-dev file-loader
(2)在src下的index.js中引入
import aa from './data/1.jpg';
console.log(aa);
let img = new Image();
img.src = aa;
console.log('123')
(3)在 webpack.config.js 中进行配置
module.exports = {
module: {
rules:[
...,
{
test: /\.(png|jpe?g|gif)$/i,
use:{
loader : 'file-loader',
options: {
// 设置打包后的文件位置
// 全局的outputPath路径
outputPath:'/image',
// [path] : 路径
// [name] : 文件名
// [ext] : 后缀
// name: '[path][name].[ext]',
// 设置打包后的文件返回的url
publicPath:'./dist/image',
}
}
}
]
}
}
8.markdown-loader
(1)安装
npm install markdown-loader
(2)在src下的index.js中引入
import markdown from './data/aaa.md';
console.log(markdown);
//在页面中输出markdown的内容
document.body.innerHTML = markdown;
console.log('123')
(3)在 webpack.config.js 中进行配置
module.exports = {
module: {
rules:[
{
test:/\.md$/,
// 执行多个loader时, 顺序是 从后往前
use:['markdown-loader']
},
]
}
}
五、总结
1.loader从字面上来看就是加载的意思
2.loaders 可以理解为一个打包方案，
3.loader当中每个模块都有不同的规则,所以相应的使用 不同的 loader来解析该模块
4.loader虽然是扩展了 webpack ，但是它只专注于转化文件这一个领域，完成压缩，打包，语言翻译等功能
5.由于webpack 本身只能打包commonjs规范的js文件，所以，针对css，图片等格式的文件没法打包，就需要引入第三方的模块进行打包。
6.它可以让原本只能打包js的webpack可以打包的种类更多了