webpack 4 笔记二 管理资源之加载css、图片、字体、数据

8 篇文章 0 订阅
6 篇文章 0 订阅

根据 官方文档 继续学习。
根据前文,已完成了 webpack 的初步构建,本章是将css、图片、字体、数据等资源结合到 wenpack 的一种尝试,会遇到什么 bug 呢?让我们拭目以待吧?

前言

本文需要手动本地添加的文件如下
在这里插入图片描述

一、加载CSS

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

cnpm 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: {  //配置所有第三方 loader 模块
+     rules: [  //第三方模块的匹配规则
+       { test: /\.css$/, use: ['style-loader','css-loader'] }
+     ]
+   }
  };

这样,当我们在本地编写完 css 样式,运行该模块,就会自动将其插入到 html 文件的 中。

使用如下

1.在项目中新添加一个 style.css 文件
src/style.css

.hello {
  color: red;
}

2.将该文件导入 index.js 中:

  import _ from 'lodash';
+ import './style.css';

  function component() {
    var element = document.createElement('div');

    // lodash 是由当前 script 脚本 import 导入进来的
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
+   element.classList.add('hello');

    return element;
  }
  document.body.appendChild(component());
}

3.运行构建命令 npm run build
在这里插入图片描述
完美
在这里插入图片描述

二、加载图片

使用 file-loader 即可将图片混合到 CSS 中

cnpm install --save-dev file-loader

同样是在 webpack.config.js 中配置

...
   module: {  //配置所有第三方 loader 模块
     rules: [  //第三方模块的匹配规则
       { test: /\.css$/, use: ['style-loader','css-loader'] },
+      { test: /\.(png|svg|jpg|gif)$/,use: ['file-loader'] }       
    ]
   }
...

本地添加一张图片并导入 index.js

  import _ from 'lodash';
  import './style.css';
+ import Icon from './icon.png';

  function component() {
    var element = document.createElement('div');
    // Lodash,现在由此脚本导入
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

+   // 将图像添加到我们现有的 div。
+   var myIcon = new Image();
+   myIcon.src = Icon;
+   element.appendChild(myIcon);
    return element;
  }
  document.body.appendChild(component());

运行构建命令 npm run build
木的问题

三、加载字体

使用 file-loader 同样可以处理字体文件,在 webpack.config.js 中配置

...
   module: {  //配置所有第三方 loader 模块
     rules: [  //第三方模块的匹配规则
       { test: /\.css$/, use: ['style-loader','css-loader'] },
       { test: /\.(png|svg|jpg|gif)$/,use: ['file-loader'] },
+      { test: /\.(woff|woff2|eot|ttf|otf)$/,use:['file-loader'] }
    ]
   }
...

在本地添加字体文件,可以直接在自己的电脑字体库里面找(一般都是存放在 C:\Windows\Fonts 该目录下),这里推荐一个字体转换网站 convert ttf to woff
将字体文件导入 style.css

+ @font-face {
+   font-family: 'MyFont';
+   src:  url('./comic.woff') format('woff');
+   font-weight: 600;
+   font-style: normal;
+ }

  .hello {
    color: red;
+   font-family: 'MyFont';
    background: url('./icon.png');
  }

运行构建命令 npm run build
一切顺利

四、加载数据

webpack 直接支持 nodejs 和 json ,直接导入即可正常解析运行,而要导入CSV、TSV 和 XML,则需要使用 csv-loader 和 xml-loader 来处理这三类文件

cnpm install --save-dev csv-loader xml-loader

在 webpack.config.js 中添加配置

...
   module: {  //配置所有第三方 loader 模块
     rules: [  //第三方模块的匹配规则
       { test: /\.css$/, use: ['style-loader','css-loader'] },
       { test: /\.(png|svg|jpg|gif)$/,use: ['file-loader'] },
+      { test: /\.(woff|woff2|eot|ttf|otf)$/,use:['file-loader'] }+ 	   { test: /\.(csv|tsv)$/,use: ['csv-loader'] },
+      { test: /\.xml$/,use: ['xml-loader'] }
    ]
   }
...

本地手动添加 data.xml 文件
src/data.xml

<note>
  <to>Mary</to>
  <from>John</from>
  <heading>Reminder</heading>
  <body>Call Cindy on Tuesday</body>
</note>

导入 index.js 即可解析

  import _ from 'lodash';
  import './style.css';
  import Icon from './icon.png';
+ import Data from './data.xml';

  function component() {
    var element = document.createElement('div');

    // Lodash, now imported by this script
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');
    element.classList.add('hello');

    // Add the image to our existing div.
    var myIcon = new Image();
    myIcon.src = Icon;

    element.appendChild(myIcon);

+   console.log(Data);

    return element;
  }

  document.body.appendChild(component());

当你打开 index.html 并查看开发者工具中的控制台,你应该能够看到你导入的数据被打印在了上面!

结语

以上,就是本次章节的全部内容,作为 wenpack 最出色的功能之一,除了 JavaScript,还可以通过 loader 引入任何其他类型的文件,包括 css 、图片、字体、数据等等。
因为是跟着官方文档一步步实践,只要细心,bug 自然就没有啦,也就是说本次学习过程十分舒心愉悦?

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值