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

最新推荐文章于 2024-06-06 17:11:37 发布

Walker_邹

最新推荐文章于 2024-06-06 17:11:37 发布

阅读量244

点赞数

分类专栏：前端 vue webpack 文章标签： webpack

本文链接：https://blog.csdn.net/qq_34487996/article/details/88841384

版权

前端同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue

8 篇文章 0 订阅

订阅专栏

webpack

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());