webpack入门到实战(二)------loader的使用
loader的概念
个人理解:一种打包方案,因为webpack只识别js文件,并不会打包其他格式的文件,通过各种loader可以去用不同方案进行打包。
官方解释:loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!
事例
index.js 入口文件
import a from './a.js';
import text from './naruto.txt';
import naruto from './123NARUTO.jpg';
let div = document.createElement('h3');
let desc = document.createElement('p');
div.innerHTML = a;
desc.innerHTML = text;
var img = new Image();
img.src = naruto;
document.body.appendChild(div);
document.body.appendChild(desc);
document.body.appendChild(img);
webpack.config.js
const path = require('path');
module.exports = {
entry:{
"main": './src/main.js'
},
mode:"development",
module:{
rules:[
{
test: /\.(txt)$/,
use:{
loader:'raw-loader'
}
},{
test: /\.(png|jpe?g)$/,
use:{
loader:'file-loader',
options: {
regExp: /([A-Z]+)+\.jpg$/i,
name: '[1]-[name].[ext]',
outputPath: 'static/assets/',
publicPath: 'static/assets/',
},
}
}
]
},
output: {
filename: 'bundle.js',
path: path.resolve(__dirname,'bundles')
}
}
这里需要注意 使用哪个loader,必须先npm install 那些loader,不然打包还是会不成功
file-loader
把识别出的资源模块,移动到指定的输出⽬目录,并且返回这个资源在输出目录的地址(字符串)
npm install --save-dev file-loader
rules: [
...,
{
test: /\.(png|jpe?g|gif)$/,
use: {
loader: "file-loader",
options: {
// placeholder 占位符 [name] 源资源模块的名称
// [ext] 源资源模块的后缀
name: "[name]_[hash].[ext]",
//打包后的存放位置
outputPath: "./images"
// 打包后文件的 url
publicPath: './images',
}
}
}
]
占位符:https://webpack.js.org/loaders/file-loader#placeholders
Options
1.name:原来的文件名
2.outputpath: 文件的输出路径,就是打包后文件放置的位置
3.publicpath:默认值为____webpack_public_path____,一般用webpack本身配置的,如果图片是打包放到cdn,域名是https://www.cdn.com/img,那么可以配置publicPath: ‘https://www.cdn.com/img’
加载图片的链接就是:“'https://www.cdn.com/img”
4、context 默认为webpack.config.js 简单来说会影响name中的path
5.emitFile 用于设置是否生成文件,类型是 Boolean,默认值为 true。
6、regExp
{
//匹配到之后在[1]可以获取到第一个匹配的规则
regExp: /([A-Z]+)+\.jpg$/i,
name: '[1]-[name].[ext]',
}
7.postTransformPublicPath 这个文档的事例我没有运行成功,如果有大神运行成功的,希望可以教教我。
url-loader
可以处理理 file-loader
所有的事情,但是遇到图片格式的模块,可以选择性的把图片转成 base64
格式的字符串,并打包到 js
中,对⼩体积的图片⽐较合适,⼤图⽚不合适。
options
limit
单位:字节,如果设置了100字节 ,小于100字节的会被打包成base64在打包的js文件,如果大于100的则不会。
fallback
类型:String 默认值:‘file-loader’
指定当目标文件的大小超过limit选项中设置的限制时使用的备用加载程序。
npm install --save-dev url-loader
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
}
}
}
]
url-loader和file-loader两个都可以用于引入图片,但是相对比较大的图片推荐使用file-loader,小的使用url-loader,但是太多小图片用url-loader打包进js的话首次加载时候会比较慢,所以根据实际场景实际使用吧。
raw-loader
在 webpack 中通过 import 方式导入文件内容,loader 并不是 webpack 内置的,所以首先要安装
npm install --save-dev raw-loader
然后在 webpack.config.js 中进行配置
module.exports = {
...,
module: {
rules: [
{
test: /\.(txt|md)$/,
use: 'raw-loader'
}
]
}
}
这样的话
import text from './naruto.txt';//text就是txt里的内容
下一节我会介绍使用css-loader和style-loader打包css文件和文字例如iconfont。