首页 / WEBPACK / 02、webpack管理资源
02、webpack管理资源
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了02、webpack管理资源，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含13244字，纯文字阅读大概需要19分钟。
内容图文
02、webpack管理资源
2、管理资源
2.1、加载css
01、创建目录
02、安装css依赖
// css-loader 解析css代码
// style-loader 将上面解析的css代码加入到style标签
// -s 下载到开发依赖
npm i style-loader css-loader -s
03、编写webpack.config.js
// 引入node提供的path依赖
const path = require('path');
// 导出对象
module.exports = {
// 设置入口文件
entry: './src/index.js',
// 设置输出文件
output: {
// 输出文件名
filename: 'bundle.js',
// 输出文件路径
path: path.resolve(__dirname, 'dist'),
},
// 模块
module: {
// 规则
rules: [
{
// 正则表达式 以.css文件名
test: /\.css$/i,
// 使用style-loader css-loader 依赖处理css文件
use: ['style-loader', 'css-loader']
},
],
}
};
04、编写src/style.css
/* 定义一个.hello类样式 */
.hello {
/* 字体颜色为红色 */
color: red;
}
05、编写src/index.js
// 引入lodash依赖
import _ from 'lodash'
// 引入style.css文件
import './style.css'
// 定义一个方法
function component() {
// 创建div标签
const element = document.createElement('div');
// lodash（目前通过一个 script 引入）对于执行这一行是必需的
// 在div标签加入hello webpack
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
// 在div标签加入.hello类样式
element.classList.add('hello')
// 返回div标签
return element;
}
// 在body标签加入上面div标签
document.body.appendChild(component());
06、index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>资源管理</title>
</head>
<body>
<!-- 引入bundle.js文件 -->
<script src="bundle.js"></script>
</body>
</html>
07、webpack执行构建
08、测试
2.2、加载 images 图像
01、创建目录
02、编写webpack.config.js
// 引入node提供的path依赖
const path = require('path');
// 导出对象
module.exports = {
// 设置入口文件
entry: './src/index.js',
// 设置输出文件
output: {
// 输出文件名
filename: 'bundle.js',
// 输出文件路径
path: path.resolve(__dirname, 'dist'),
},
// 模块
module: {
// 规则
rules: [
{
// 正则表达式 以.css文件名
test: /\.css$/i,
// 使用style-loader css-loader 依赖处理css文件
use: ['style-loader', 'css-loader']
},
{
// 正则表达式 以.png .svg .jpg .jpeg .gif文件名
test: /\.(png|svg|jpg|jpeg|gif)$/i,
// 使用 webpack5内置的 Asset Modules
type: 'asset/resource',
},
],
}
};
03、编写src/style.css
/* 定义一个.hello类样式 */
.hello {
/* 字体颜色为红色 */
color: red;
/* 背景图 */
background: url(./icon.png);
}
04、编写src/index.js
// 引入lodash依赖
import _ from 'lodash'
// 引入style.css文件
import './style.css'
// 引入图片
import Icon from './icon.png'
// 定义一个方法
function component() {
// 创建div标签
const element = document.createElement('div');
// lodash（目前通过一个 script 引入）对于执行这一行是必需的
// 在div标签加入hello webpack
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
// 在div标签加入.hello类样式
element.classList.add('hello')
// 创建img标签
const image = new Image();
// 为img加入src图片路径
image.src = Icon
// 加入div标签中
element.appendChild(image)
// 返回div标签
return element;
}
// 在body标签加入上面div标签
document.body.appendChild(component());
05、编写dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>资源管理</title>
</head>
<body>
<!-- 引入bundle.js文件 -->
<script src="bundle.js"></script>
</body>
</html>
06、webpack执行构建
07、测试
2.3、加载 fonts 字体
01、创建目录
02、编写webpack.config.js
// 引入node提供的path依赖
const path = require('path');
// 导出对象
module.exports = {
// 设置入口文件
entry: './src/index.js',
// 设置输出文件
output: {
// 输出文件名
filename: 'bundle.js',
// 输出文件路径
path: path.resolve(__dirname, 'dist'),
},
// 模块
module: {
// 规则
rules: [
{
// 正则表达式 以.css文件名
test: /\.css$/i,
// 使用style-loader css-loader 依赖处理css文件
use: ['style-loader', 'css-loader']
},
{
// 正则表达式 以.png .svg .jpg .jpeg .gif文件名
test: /\.(png|svg|jpg|jpeg|gif)$/i,
// 使用 webpack5内置的 Asset Modules
type: 'asset/resource',
},
{
// 正则表达式 以.eot .svg .ttf .woff .woff2文件名
test: /\.(eot|svg|ttf|woff|woff2|)$/i,
// 使用 webpack5内置的 Asset Modules
type: 'asset/resource',
},
],
}
};
03、编写src/style.css
/* 引入字体 */
@font-face {
font-family: 'iconfont';
src: url('./iconfont.eot');
src: url('./iconfont.eot?#iefix') format('embedded-opentype'),
url('iconfont.woff2') format('woff2'),
url('iconfont.woff') format('woff'),
url('iconfont.ttf') format('truetype'),
url('iconfont.svg#iconfont') format('svg');
}
/* 定义使用 iconfont 的样式 */
.iconfont {
font-family: 'iconfont' !important;
font-size: 28px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 定义一个.hello类样式 */
.hello {
/* 字体颜色为红色 */
color: red;
/* 背景图 */
background: url(./icon.png);
}
04、编写src/index.js
// 引入lodash依赖
import _ from 'lodash'
// 引入style.css文件
import './style.css'
// 引入图片
import Icon from './icon.png'
// 定义一个方法
function component() {
// 创建div标签
const element = document.createElement('div');
// lodash（目前通过一个 script 引入）对于执行这一行是必需的
// 在div标签加入hello webpack
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
// 在div标签加入.hello类样式
element.classList.add('hello')
// 拼接成<div class='hello'>Hello webpack</div>
// 创建img标签
const image = new Image();
// 为img加入src图片路径
image.src = Icon
// 拼接成 </img src='./icon.....'>
// 加入div标签中
element.appendChild(image)
// 创建span标签
const span = document.createElement("span");
// 在span标签加入.iconfont
span.classList.add('iconfont')
// 在span标签加入字体编码 
span.innerHTML = ''
// 拼接成 <span class='iconfont'></span>
// 将span标签加入到div中
element.appendChild(span)
/**
* 最终拼接成
* <div class='hello'>
* Hello webpack
* </img src='./icon.....'>
* <span class='iconfont'></span>
* </div>
*
* */
// 返回div标签
return element;
}
// 在body标签加入上面div标签
document.body.appendChild(component());
05、编写dist/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>资源管理</title>
</head>
<body>
<!-- 引入bundle.js文件 -->
<script src="bundle.js"></script>
</body>
</html>
06、webpack执行 构建
07、测试
2.4、加载xml数据
01、安装依赖
// 安装 xml的依赖
npm i xml-loader -s
02、创建目录
03、编写src/data.xml
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Mary</to>
<from>John</from>
<heading>Reminder</heading>
<body>Call Cindy on Tuesday</body>
</note>
04、编写src/index.js
// 引入lodash依赖
import _ from 'lodash'
// 引入style.css文件
import './style.css'
// 引入图片
import Icon from './icon.png'
// 引入======data.xml==========
import Data from './data.xml'
// 定义一个方法
function component() {
// 创建div标签
const element = document.createElement('div');
// lodash（目前通过一个 script 引入）对于执行这一行是必需的
// 在div标签加入hello webpack
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
// 在div标签加入.hello类样式
element.classList.add('hello')
// 拼接成<div class='hello'>Hello webpack</div>
// 创建img标签
const image = new Image();
// 为img加入src图片路径
image.src = Icon
// 拼接成 </img src='./icon.....'>
// 加入div标签中
element.appendChild(image)
// 创建span标签
const span = document.createElement("span");
// 在span标签加入.iconfont
span.classList.add('iconfont')
// 在span标签加入字体编码 
span.innerHTML = ''
// 拼接成 <span class='iconfont'></span>
// 将span标签加入到div中
element.appendChild(span)
// ====== 在控制台输出 ======
console.log(Data)
/**
* 最终拼接成
* <div class='hello'>
* Hello webpack
* </img src='./icon.....'>
* <span class='iconfont'></span>
* </div>
*
* */
// 返回div标签
return element;
}
// 在body标签加入上面div标签
document.body.appendChild(component());
05、编写webpack.config.js
// 引入node提供的path依赖
const path = require('path');
// 导出对象
module.exports = {
// 设置入口文件
entry: './src/index.js',
// 设置输出文件
output: {
// 输出文件名
filename: 'bundle.js',
// 输出文件路径
path: path.resolve(__dirname, 'dist'),
},
// 模块
module: {
// 规则
rules: [
{
// 正则表达式 以.css文件名
test: /\.css$/i,
// 使用style-loader css-loader 依赖处理css文件
use: ['style-loader', 'css-loader']
},
{
// 正则表达式 以.png .svg .jpg .jpeg .gif文件名
test: /\.(png|svg|jpg|jpeg|gif)$/i,
// 使用 webpack5内置的 Asset Modules
type: 'asset/resource',
},
{
// 正则表达式 以.eot .svg .ttf .woff .woff2文件名
test: /\.(eot|svg|ttf|woff|woff2|)$/i,
// 使用 webpack5内置的 Asset Modules
type: 'asset/resource',
},
{
// 正则表达式 以.xml文件名
test: /\.xml$/i,
// 使用xml-loader处理xml文件
use: ['xml-loader'],
},
],
}
};
06、webpack执行构建
07、测试
2.5、自定义JSON模块 parser
01、安装依赖
// 安装了 toml 、 yamljs 、 json5 依赖
npm i toml yamljs json5 -s
02、编写src/data.toml
title = "TOML Example"
[owner]
name = "Tom Preston-Werner"
organization = "GitHub"
bio = "GitHub Cofounder & CEO\nLikes tater tots and beer."
dob = 1979-05-27T07:32:00Z
03、编写src/data.yaml
title: YAML Example
owner:
name: Tom Preston-Werner
organization: GitHub
bio: |-
GitHub Cofounder & CEO
Likes tater tots and beer.
dob: 1979-05-27T07:32:00.000Z
04、编写src/data.json5
{
// comment
title: 'JSON5 Example',
owner: {
name: 'Tom Preston-Werner',
organization: 'GitHub',
bio: 'GitHub Cofounder & CEO\n\
Likes tater tots and beer.',
dob: '1979-05-27T07:32:00.000Z',
},
}
05、webpack.config.js
// 引入node提供的path依赖
const path = require('path');
// -------------修改----------------------
const toml = require('toml');
const yaml = require('yamljs');
const json5 = require('json5');
// --------------------------------------
// 导出对象
module.exports = {
// 设置入口文件
entry: './src/index.js',
// 设置输出文件
output: {
// 输出文件名
filename: 'bundle.js',
// 输出文件路径
path: path.resolve(__dirname, 'dist'),
},
// 模块
module: {
// 规则
rules: [
{
// 正则表达式 以.css文件名
test: /\.css$/i,
// 使用style-loader css-loader 依赖处理css文件
use: ['style-loader', 'css-loader']
},
{
// 正则表达式 以.png .svg .jpg .jpeg .gif文件名
test: /\.(png|svg|jpg|jpeg|gif)$/i,
// 使用 webpack5内置的 Asset Modules
type: 'asset/resource',
},
{
// 正则表达式 以.eot .svg .ttf .woff .woff2文件名
test: /\.(eot|svg|ttf|woff|woff2|)$/i,
// 使用 webpack5内置的 Asset Modules
type: 'asset/resource',
},
{
// 正则表达式 以.xml文件名
test: /\.xml$/i,
// 使用xml-loader处理xml文件
use: ['xml-loader'],
},
// -------------修改----------------------
{
test: /\.toml$/i,
type: 'json',
parser: {
parse: toml.parse,
},
},
{
test: /\.yaml$/i,
type: 'json',
parser: {
parse: yaml.parse,
},
},
{
test: /\.json5$/i,
type: 'json',
parser: {
parse: json5.parse,
},
},
// --------------------------------------
],
}
};
06、编写src/index.js
// 引入lodash依赖
import _ from 'lodash'
// 引入style.css文件
import './style.css'
// 引入图片
import Icon from './icon.png'
// 引入======data.xml==========
import Data from './data.xml'
// ------------------------修改----------------------------------
import toml from './data.toml';
import yaml from './data.yaml';
import json from './data.json5';
console.log("toml输出", toml.title); // output `TOML Example`
console.log("toml输出", toml.owner.name); // output `Tom Preston-Werner`
console.log("yaml输出", yaml.title); // output `YAML Example`
console.log("yaml输出", yaml.owner.name); // output `Tom Preston-Werner`
console.log("json输出", json.title); // output `JSON5 Example`
console.log("json输出", json.owner.name); // output `Tom Preston-Werner`
// -------------------------------------------------------------
// 定义一个方法
function component() {
// 创建div标签
const element = document.createElement('div');
// lodash（目前通过一个 script 引入）对于执行这一行是必需的
// 在div标签加入hello webpack
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
// 在div标签加入.hello类样式
element.classList.add('hello')
// 拼接成<div class='hello'>Hello webpack</div>
// 创建img标签
const image = new Image();
// 为img加入src图片路径
image.src = Icon
// 拼接成 </img src='./icon.....'>
// 加入div标签中
element.appendChild(image)
// 创建span标签
const span = document.createElement("span");
// 在span标签加入.iconfont
span.classList.add('iconfont')
// 在span标签加入字体编码 
span.innerHTML = ''
// 拼接成 <span class='iconfont'></span>
// 将span标签加入到div中
element.appendChild(span)
// === 在控制台输出 ===
console.log(Data)
/**
* 最终拼接成
* <div class='hello'>
* Hello webpack
* </img src='./icon.....'>
* <span class='iconfont'></span>
* </div>
*
* */
// 返回div标签
return element;
}
// 在body标签加入上面div标签
document.body.appendChild(component());
07、webpack执行构建
08、测试
2、咨询
如果你觉得本文对您有所帮助，希望您【点赞】、【评论】、【分享】、【收藏】 。您的【点赞】、【评论】、【分享】、【收藏】就是我写作的动力。如果你需要咨询技术问题与及源代码，可以加本作者微信【hdc1002-】，备注【博客】
内容总结
以上是互联网集市为您收集整理的02、webpack管理资源全部内容，希望文章能够帮你解决02、webpack管理资源所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】