02、webpack管理资源

其他 2021-04-03 09:22:03 阅读次数: 0

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标签加入字体编码 &#xe630;
  span.innerHTML = '&#xe630;'
  // 拼接成 <span class='iconfont'>&#xe630;</span>

  // 将span标签加入到div中
  element.appendChild(span)

  /**
   *  最终拼接成
   * <div class='hello'>
   *  Hello  webpack
   *   </img src='./icon.....'>
   *   <span class='iconfont'>&#xe630;</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标签加入字体编码 &#xe630;
  span.innerHTML = '&#xe630;'
  // 拼接成 <span class='iconfont'>&#xe630;</span>

  // 将span标签加入到div中
  element.appendChild(span)

  // ====== 在控制台输出 ======
  console.log(Data)

  /**
   *  最终拼接成
   * <div class='hello'>
   *  Hello  webpack
   *   </img src='./icon.....'>
   *   <span class='iconfont'>&#xe630;</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标签加入字体编码 &#xe630;
  span.innerHTML = '&#xe630;'
  // 拼接成 <span class='iconfont'>&#xe630;</span>

  // 将span标签加入到div中
  element.appendChild(span)

  // === 在控制台输出 ===
  console.log(Data)

  /**
   *  最终拼接成
   * <div class='hello'>
   *  Hello  webpack
   *   </img src='./icon.....'>
   *   <span class='iconfont'>&#xe630;</span>
   * </div>
   * 
   *  */
  // 返回div标签
  return element;
}

// 在body标签加入上面div标签
document.body.appendChild(component());

07、webpack执行构建

在这里插入图片描述

08、测试

在这里插入图片描述

2、咨询

如果你觉得本文对您有所帮助，希望您【点赞】、【评论】、【分享】、【收藏】 。您的【点赞】、【评论】、【分享】、【收藏】就是我写作的动力。如果你需要咨询技术问题与及源代码，可以加本作者微信【hdc1002-】，备注【博客】

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_41620231/article/details/115018164
今日推荐
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
周排行
rbac——界面、权限
Apache CXF + SpringMVC 整合发布WebService
so插件化
Vue.js实战系列---图标字体制作（svg格式）
PAT乙级 1007 素数对猜想(孪生素数对) (20分) ---（C语言 + 详细注释）
被IRM保护的文档，打开失败
Calendar和Date计算日期差的小问题
win10子系统ubuntu18.4安装docker
利用Wrap Shell Script定位Android Native内存泄漏
MySQL: Transaction (Part I - Basic Concept)
每日归档
更多
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022