飞道的博客

02、webpack管理资源

2021-04-09 11:54 417人阅读  评论(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-】，备注【博客】


转载：https://blog.csdn.net/qq_41620231/article/details/115018164
查看评论
* 以上用户言论只代表其个人观点，不代表本网站的观点或立场