AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

webpack资源管理

2023-11-24 43
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： webpack资源管理

天分高的人如果懒惰成性，亦即不自努力以发展他的才能，则其成就也不会很大，有时反会不如天分比他低些的人。——茅盾

书接上文，首先对上次的项目进行改造，参考：https://webpack.docschina.org/guides/asset-management/

将main.js改为bundle.js

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>管理资源</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

为了在 JavaScript 模块中 import 一个 CSS 文件，你需要安装 style-loader 和 css-loader，并在 module 配置 中添加这些 loader：

npm install --save-dev style-loader css-loader

webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};
Tip

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这个示例中，所有以 .css 结尾的文件，都将被提供给 style-loader 和 css-loader。

这使你可以在依赖于此样式的 js 文件中 import './style.css'。现在，在此模块执行过程中，含有 CSS 字符串的 <style> 标签，将被插入到 html 文件的 <head> 中。

我们尝试一下，通过在项目中添加一个新的 style.css 文件，并将其 import 到我们的 index.js 中：

style.css

.hello {
  color: red;
}

index.js

import _ from 'lodash';
import './style.css';
function component() {
    const element = document.createElement('div');
    // lodash 在当前 script 中使用 import 引入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');
    return element;
  }
  document.body.appendChild(component());

执行

npm run build

查看页面元素

接下来轮到image了，首先在webpack.config.js中，配置png、jpg等图片格式

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

现在，import MyImage from './my-image.png'中的图片路径会被识别且替换为output后的真正路径

我们加一个图片：

然后在index.js使用

import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
function component() {
  const element = document.createElement('div');
  // lodash 在当前 script 中使用 import 引入
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');
  // 将图像添加到我们已经存在的 div 中。
  const myIcon = new Image();
  myIcon.src = Icon;
  element.appendChild(myIcon);
  return element;
}
document.body.appendChild(component());

src/style.css

.hello {
    color: red;
    background: url('./icon.png');
}

重新构建

npm run build

对于字体

webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
};

然后添加字体文件

在style.css中使用

@font-face {
    font-family: 'MyFont';
    src: url('./my-font.woff2') format('woff2'),
        url('./my-font.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
.hello {
    color: red;
    font-family: 'MyFont';
    background: url('./icon.png');
}

由于我这里是图标，所以顺带我们将图标代码写上

index.js

import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
function component() {
  const element = document.createElement('div');
  // lodash 在当前 script 中使用 import 引入
  element.innerHTML = _.join(['Hello', 'webpack'], '&#xe6eb; ');
  element.classList.add('hello');
  // 将图像添加到我们已经存在的 div 中。
  const myIcon = new Image();
  myIcon.src = Icon;
  element.appendChild(myIcon);
  return element;
}
document.body.appendChild(component());

再次编译

npm run build

可以看到图标字体生效

此外，可以加载的有用资源还有数据，如 JSON 文件，CSV、TSV 和 XML。类似于 NodeJS，JSON 支持实际上是内置的，也就是说 import Data from './data.json' 默认将正常运行。要导入 CSV、TSV 和 XML，你可以使用 csv-loader 和 xml-loader。让我们处理加载这三类文件：

npm install --save-dev csv-loader xml-loader

webpack.config.js配置规则

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(csv|tsv)$/i,
        use: ['csv-loader'],
      },
      {
        test: /\.xml$/i,
        use: ['xml-loader'],
      },
    ],
  },
};

添加数据文件data.xml、data.csv

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>

src/data.csv

to,from,heading,body
Mary,John,Reminder,Call Cindy on Tuesday
Zoe,Bill,Reminder,Buy orange juice
Autumn,Lindsey,Letter,I miss you

导入文件，会自动处理为json

src/index.js

import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
import Data from './data.xml';
import Notes from './data.csv';
function component() {
  const element = document.createElement('div');
  // lodash 在当前 script 中使用 import 引入
  element.innerHTML = _.join(['Hello', 'webpack'], '&#xe6eb; ');
  element.classList.add('hello');
  // 将图像添加到我们已经存在的 div 中。
  const myIcon = new Image();
  myIcon.src = Icon;
  element.appendChild(myIcon);
  console.log({ Data });
  console.log({ Notes });
  return element;
}
document.body.appendChild(component());

编译

npm run build

可以看到控制台成功打印

自定义 JSON 模块 parser

通过使用 自定义 parser 替代特定的 webpack loader，可以将任何 toml、yaml 或 json5 文件作为 JSON 模块导入。

新建一个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

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

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',
  },
}

首先安装对应的packages

npm install toml yamljs json5 --save-dev

配置webpack.config.js

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: [
      {
        test: /\.css$/i,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
      {
        test: /\.(csv|tsv)$/i,
        use: ['csv-loader'],
      },
      {
        test: /\.xml$/i,
        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,
        },
      },
    ],
  },
};

然后在src/index.js中使用

import _ from 'lodash';
import './style.css';
import Icon from './icon.png';
import Data from './data.xml';
import Notes from './data.csv';
import toml from './data.toml';
import yaml from './data.yaml';
import json from './data.json5';
console.log({ toml });
console.log({ yaml });
console.log({ json });
function component() {
  const element = document.createElement('div');
  // lodash 在当前 script 中使用 import 引入
  element.innerHTML = _.join(['Hello', 'webpack'], '&#xe6eb; ');
  element.classList.add('hello');
  // 将图像添加到我们已经存在的 div 中。
  const myIcon = new Image();
  myIcon.src = Icon;
  element.appendChild(myIcon);
  console.log({ Data });
  console.log({ Notes });
  return element;
}
document.body.appendChild(component());

编译

npm run build

成功解析

最后是全局资源相关的知识点，简单说就是你可以自定义组件，并将这些资源放到组件文件夹下一期复制过去

最后是回退处理，用于之后的学习

删除以下文件

|- data.csv
|- data.json5
|- data.toml
|- data.xml
|- data.yaml
|- icon.png
|- my-font.woff
|- my-font.woff2
|

webpack.config.js

const path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

src/index.js

import _ from 'lodash';
function component() {
  const element = document.createElement('div');
  element.innerHTML = _.join(['Hello', 'webpack'], ' ');
  return element;
}
document.body.appendChild(component());

移除依赖

npm uninstall css-loader csv-loader json5 style-loader toml xml-loader yamljs
文章标签：
资源管理
数据格式
JSON
前端开发
JavaScript
XML
关键词：
Webpack资源管理
快乐阿超
目录
相关文章
技术小甜
|
Web App开发 JavaScript 前端开发
Webpack 资源管理
技术小甜
1441 0
文艺小青年
|
Web App开发 JavaScript 前端开发
Webpack 资源管理
文艺小青年
1312 0
dufadayang
|
3月前
|
JavaScript
webpack打包TS
webpack打包TS
dufadayang
138 60
我是快乐的嘟嘟
|
2月前
|
缓存 前端开发 JavaScript
Webpack 打包的基本原理
【10月更文挑战第5天】
我是快乐的嘟嘟
48 10
我是快乐的嘟嘟
|
2月前
|
前端开发 JavaScript
ES6模块化和webpack打包
【10月更文挑战第5天】
我是快乐的嘟嘟
68 9
有路有乔-六月
|
2月前
|
缓存 前端开发 JavaScript
深入了解Webpack：模块打包的革命
【10月更文挑战第11天】深入了解Webpack：模块打包的革命
有路有乔-六月
35 1
六卿
|
3月前
|
JavaScript 测试技术 Windows
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
本文介绍了如何使用vue-cli和webpack为Vue项目配置不同的生产和测试环境，包括修改`package.json`脚本、使用`cross-env`处理环境变量、创建不同环境的`.env`文件，并在`webpack.prod.conf.js`中使用`DefinePlugin`来应用这些环境变量。
六卿
159 2
vue配置webpack生产环境.env.production、测试环境.env.development(配置不同环境的打包访问地址)
一缕微风绕指柔
|
2月前
|
缓存 前端开发 JavaScript
Webpack技术深度解析：模块打包与性能优化
【10月更文挑战第13天】Webpack技术深度解析：模块打包与性能优化
一缕微风绕指柔
43 0
代码bug生产队
|
2月前
|
前端开发 JavaScript 开发者
深入了解Webpack：现代JavaScript应用的打包利器
【10月更文挑战第11天】 深入了解Webpack：现代JavaScript应用的打包利器
代码bug生产队
31 0
dufadayang
|
3月前
|
缓存
webpack 打包多页面应用
webpack 打包多页面应用
dufadayang
26 1

热门文章

最新文章

  • 1
    webpack window 使用sass来编译css样式
  • 2
    vue之webpack打包原理和用法详解
  • 3
    UniApp 解决 Error: Cannot find module ‘webpack/lib/RuleSet‘
  • 4
    wp2vite的妙用，让webpack项目支持vite
  • 5
    2.2.3 使用webpack loader
  • 6
    你真的理解 Webpack？请回答下列问题
  • 7
    webpack指南-webpack介绍-代码分割 - CSS
  • 8
    掘金课程《Webpack5 核心原理与应用实践》学习笔记
  • 9
    基于React、Redux、Webpack 和 React-Router的项目模板。 #89
  • 10
    webpack深入浅出（二）| 小册免费学
  • 1
    Vite和Webpack的区别是什么
    65
  • 2
    js开发：请解释什么是Webpack，以及它在项目中的作用。
    64
  • 3
    webpack如何设置devServer启动项目为https协议
    1346
  • 4
    webpack成长指北第9章---webpack如何对icon字体进行打包
    136
  • 5
    webpack成长指北第8章---webpack的CSS Modules打包
    76
  • 6
    webpack成长指北第7章---webpack的css\less\scss样式打包
    105
  • 7
    webpack成长指北第6章---webpack的图片引入
    63
  • 8
    webpack成长指北第3章---常用webpack命令及使用webpack命令的方式
    63
  • 9
    webpack成长指北第2章---安装webpack的正确姿势
    58
  • 10
    深入理解前端性能优化中的Webpack Tree Shaking
    86

    • 相关课程

    更多
  • 前端自动化构建工具 Webpack
  • Hadoop 分布式资源管理框架 YARN
  • 批量云资源管理与自动化运维
  • 企业Web常用架构LAMP-LNMP实战

    • 相关电子书

    更多
  • 基于webpack和npm的前端组件化实践
  • Web应用系统性能优化
  • 从Web到Cloud App——YunOS Web App 开发经验分享

    • 相关实验场景

    更多
  • 1分钟SAE部署Web在线游戏
  • Html5和Webpack3：Webpack5的常见用法
  • Html5和Webpack1：Webpack5打包工具介绍
    • 下一篇
    fs.oss.accessKeyId和fs.oss.accessKeySecret。