webpack入门介绍(二) --- loaders
发布日期:2021-06-29 12:06:17
浏览次数:3
分类:技术文章
本文共 5387 字,大约阅读时间需要 17 分钟。
loaders
loaders
官网: https://webpack.js.org/loaders/
// webpack.config.jsmodule.exports = { ...., module: { rules:[ { test:/\.txt$/, loader: 'raw-load' } ] }}
案例: (但是webpack会默认报错,因为webpack处理不了txt和md这样的非js的模块,但是可以通过专门来处理纯文本内容,不同的loader有不同的作用)
// src/data/girl.txt 我是txt的内容
// src/index.jsimport girl from './data/girl.txt'console.log(girl);
raw-loader
加载文件原始内容(utf-8)
- 安装
npm install --save-dev raw-loader
- 在src下的index.js中引入
import girl from './data/girl.txt';console.log(girl);console.log('123456789')
- 在 webpack.config.js 中进行配置
module.exports = { ..., module: { rules: [ { test: /\.(txt|md)$/, use: 'raw-loader' } ] }}
- 然后package.json运行脚本start
注意:在黑窗口里面,写./node_modules/.bin/webpack
会报错./不是内部或者外部的指令,要写成反斜杠.\node_modules\.bin\webpack
markdown-loader
- 安装(markdown的和html)
npm install markdown-loadernpm install --save-dev html-loader
- 在src下的index.js中引入
import mdd from './data/haha.md';console.log(mdd);//在页面中输出markdown的内容document.body.innerHTML = mdd;console.log('123456789')
- 在 webpack.config.js 中进行配置
module.exports = { ..., module: { rules:[ ..., { test:/\.md$/, // 执行多个loader时, 顺序是 从后往前 use:['html-loader','markdown-loader'] }, ] }}
- 然后package.json运行脚本start
file-loader
将识别出的资源模块文件发送到指定的输出文件夹,并返回这个资源在输出目录的地址(字符串)
- 安装
npm install --save-dev file-loader
- 在src下的index.js中引入
import ss from './data/-26953ed6fb615e2a.jpg';console.log(ss);let img = new Image();img.src = ss;document.body.appendChild(img)console.log('123456789')
- 在 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', } } } ] }}
- 然后package.json运行脚本start
批注 占位符:https://webpack.js.org/loaders/file-loader#placeholders
url-loader
可以处理file-loader
所有的事情,但是遇到图片格式的模块,可以选择行的把图片转成base64
格式的字符串,并打包到js中, 对小体积
的图片比较合适,大图片不合适.
- 安装
npm install --save-dev url-loader
- 在 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 } } }]
- 然后package.json运行脚本start
css-loader
分析css
模块之间的关系,并合成一个css.
- 安装
npm install --save-dev css-loader
- 在src下新建一个cs.css文件
body{ background: rgb(47, 255, 203);}
- 在index.js里面引入
import cs from './src/cs.css'console.log(cs[0][1]); //body{background: greenyellow;}let sty = document.createElement('style');sty.innerHTML = cs[0][1];document.head.appendChild(sty);
- 在 webpack.config.js 中进行配置
rules: [ ..., { { test: /\.css$/, use: 'css-loader', // or use: { loader: "css-loader", options: { // 启用/禁用 url() 处理 url: true, // 启用/禁用 @import 处理 import: true, // 启用/禁用 Sourcemap sourceMap: false } } } }]
- 然后package.json运行脚本start
style-loader
把css-loader
生成的内容, 用style
标签挂载到页面的head
中.
- 安装
npm install --save-dev style-loader
- 在index.js里面引入
//cs[0][1] 改为 csconsole.log(cs);
- 在 webpack.config.js 中进行配置
rules: [ ..., { test: /\.css$/, use: ["style-loader", "css-loader"] }]
同一个任务的 loader
可以同时挂载多个,处理顺序为:从右到左
,也就是先通过 css-loader
处理,然后把处理后的 css
字符串交给 style-loader
进行处理
{ test: /\.css$/, use: [ 'style-loader',{ loader:'css-loader', options: { // 启用/禁用 url() 处理 url: false, // 启用/禁用 @import 处理 // import: true, // 启用/禁用 Sourcemap // sourceMap: false } }]}
- 然后package.json运行脚本start
sass-loader
把sass
语法转换成css
, 依赖node-sass
模块
- 安装
npm install --save-dev sass-loader node-sass
- 在 webpack.config.js 中进行配置
// webpack.config.jsmodule.exports = { ... module: { rules: [{ test: /\.scss$/, use: [{ loader: "style-loader" // 将 JS 字符串生成为 style 节点 }, { loader: "css-loader" // 将 CSS 转化成 CommonJS 模块 }, { loader: "sass-loader" // 将 Sass 编译成 CSS }] }] }};
注意:
- webpack默认情况下只能处理js模板;需要提供的其他功能来把任意文件数据作为模块进行处理
- 同一个任务的
loader
可以同时挂载多个,处理顺序为:从右到左
,也就是先通过css-loader
处理,然后把处理后的css
字符串交给style-loader
进行处理
总结:
loaders
raw-loader
加载文件原始内容markdown-loader
file-loader
将识别出的资源模块文件发送到指定的输出文件夹,并返回这个资源在输出目录的地址(字符串)url-loader
可以处理file-loader所有的事情, 对小体积的图片
比较合适,转成base64
格式的字符串css-loader
分析css
模块之间的关系,并合成一个cssstyle-loader
把css-loader
生成的内容,用style
标签挂载到页面的head
中.sass-loader
把sass
语法转换成css
,依赖node-sass
模块
转载地址:https://blog.csdn.net/ZZZ___jh/article/details/117741870 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
感谢大佬
[***.8.128.20]2024年04月26日 14时08分15秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
2021.4.30课堂总结和作业
2019-04-29
需要吗?2000GB+学习视频教程 面试资料免费下载
2019-04-29
MySQL对已存在数据库表添加自增ID字段
2019-04-29
idea中的一些常用快捷键
2019-04-29
js校验表单后提交表单的三种方法总结【转载】
2019-04-29
欢迎使用CSDN-markdown编辑器
2019-04-29
a标签中href调用js的几种方法
2019-04-29
jstl标签详解
2019-04-29
Eclipse中使用SVN的使用
2019-04-29
JSON.parse和eval的区别
2019-04-29
JQuery中$.ajax()方法参数详解
2019-04-29
正则表达式的数字实例
2019-04-29
【转】EasyUI 验证
2019-04-29
Django实战---商城购物车的增删改、显示和合并购物车
2019-04-29
Django项目实战----添加支付宝支付
2019-04-29
DRF框架---前言(简单使用)
2019-04-29
字符串外面是b“ “的转换 -亲测有效
2019-04-29
单通道和多通道卷积
2019-04-29