webpack 學習筆記：引入 CSS（上）

zhangbao發表於2020-10-05
Web筆記CSS
系列文章：
webpack 學習筆記：入門介紹 webpack 學習筆記：核心概念（上） webpack 學習筆記：核心概念（下） webpack 學習筆記：使用 babel（上） webpack 學習筆記：使用 babel（下） webpack 學習筆記：使用 lodash webpack 學習筆記：引入 CSS（上）

本篇文章介紹如何在 webpack 中使用 CSS。

webpack 預設只能解析 .js 檔案和 .json 檔案。如果是 CSS 的話，就需要額外引入 css-loader 和 style-loader 來處理了。

引入 CSS 資源

首先安裝下依賴：

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

然後修改下配置，新增對 CSS 檔案的解析支援：

const path = require('path');

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

style.css

.hello {
  color: red;
}

接下來在 src/index.js 中引入：

import join from 'lodash/join';
import './style.css';

function component() {
  const element = document.createElement('div');
  element.innerHTML = join(['Hello', 'webpack'], ' ');
  element.classList.add('hello');

  return element;
}

document.body.appendChild(component());

重新構建專案 npm run build，就能看到紅色的 Hello webpack 了。

webpack 學習筆記：引入 CSS

可以看見，style.css 裡的內容以 <style> 標籤的形式插入到了 <head> 中——這正是 style-loader 所做的事情。而 css-loader 做的，是處理以 .css 字尾引入的資源，將檔案內容裝換為 webpack 理解的 CommonJS 程式碼格式。

使用圖片

CSS 難免會碰到引用圖片的場景，我們試著在 style.css 中引入圖片試試。

.hello {
  color: red;
+  background: url("./images/demo.jpeg");
}

然後編譯，發現會有報錯：

ERROR in ./src/images/demo.jpeg 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

這是因為 webpack 不能正確解析 demo.jpeg 的原因，為此需要安裝 file-loader 來處理圖片解析。

npm install --save-dev file-loader
const path = require('path');

module.exports = {
  ...
  module: {
    rules: [
      ...
      {
        test: /\.(png|svg|jpe?g|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
};

再次解析，發現就可以了。

npm run build

...
                                Asset      Size  Chunks                         Chunk Names
                            bundle.js  21.4 KiB    main  [emitted]              main
c23c4a29e2a53a448534478a15da11f5.jpeg    58 KiB          [emitted] [immutable]
...

webpack 學習筆記：引入 CSS

當然，我們還可以使用 url-loader 來替換 file-loader，對圖片資源做進一步的控制：base64 編碼。

url-loader 的介紹如下：

url-loader works like file-loader, but can return a DataURL if the file is smaller than a byte limit.

下面我們修改下配置，讓 url-loader 來處理圖片。

npm install url-loader --save-dev
// {
//   test: /\.(png|svg|jpe?g|gif)$/,
//   use: [
//     'file-loader'
//   ]
// },
{
    test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/i,
    loader: 'url-loader',
    options: {
        limit: 81920,
    },
}

低於 80KB (81920 / 1024 = 80)的檔案（注：這裡只是作為演示使用，實際專案 8KB 就足夠了）會被 base64 處理，嵌入到打包檔案中，而不單獨作為檔案輸出。

...
    Asset    Size  Chunks             Chunk Names
bundle.js  99 KiB    main  [emitted]  main
...

成功。

（完）

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章