webpack 4 筆記二 管理資源之加載css、圖片、字體、數據

根據 官方文檔 繼續學習。
根據前文,已完成了 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 自然就沒有啦,也就是說本次學習過程十分舒心愉悅?

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章