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 協議》，轉載必須註明作者和本文連結

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

引入 CSS 資源

使用圖片

相關文章