webpack资源管理

简介: 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-loadercss-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-loadercss-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中,配置pngjpg等图片格式

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-loaderxml-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.xmldata.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,可以将任何 tomlyamljson5 文件作为 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
相关文章
|
Web App开发 JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
|
29天前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
11 0
|
1月前
|
资源调度 前端开发 JavaScript
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
vue - ES6模块化、promise、webpack打包(所在在学的朋友们先看这篇,看了不吃亏)...
|
2月前
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
42 0
|
2月前
|
JSON JavaScript 前端开发
对webpack的理解——打包样式资源
对webpack的理解——打包样式资源
17 0
|
2月前
|
JavaScript 数据库
使用 Webpack 打包 node 程序,node_modules 真的被干掉啦
使用 Webpack 打包 node 程序,node_modules 真的被干掉啦
53 0
|
2月前
Webpack打包出错:Error: Cannot find module ‘webpack/lib/node/NodeTemplatePlugin‘ Require stack:
Webpack打包出错:Error: Cannot find module ‘webpack/lib/node/NodeTemplatePlugin‘ Require stack:
|
2月前
|
前端开发 JavaScript 开发者
webpack模块打包器
Webpack是一种前端资源构建工具,可以将多个文件和模块打包成一个或多个bundle。它具有高度的可配置性,支持各种类型的文件和插件,可以自定义打包过程和结果。Webpack的核心概念包括入口、出口和模式,可以分别用于指示打包的起点、输出位置和优化级别。Webpack还具有自动化构建过程,通过Tapable机制组织多个处理流程,并允许插件监听特定事件来参与整个构建过程。总之,Webpack是一个功能强大的前端资源构建工具,提供了高度可配置的选项和插件机制,方便开发者进行自定义和扩展。
|
3月前
|
前端开发 JavaScript
探寻webpack打包vue前端项目的过程和出现的问题
前端 vue2 项目中,多人开发,从一段时间开始发现打包变得特别慢,每次线上更新也至少要10几20分钟,正常项目线上更新一般也就1、2分钟,新需求开发拉新分支本地运行也要至少5、6分钟才能运行的起来
46 1

热门文章

最新文章

相关产品

  • 云迁移中心