在webpack與SPA中如何管理CSS等資源

本篇文章主要介紹了webpack與SPA實踐之管理CSS等資源的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

上一篇介紹如何使用webpack搭建一個穩定的支援本地服務、自動刷新、模組熱替換、使用ES6編寫JavaScript的開發環境，本篇主要介紹webpack如何處理HTML應用三大元素的另一個元素– CSS及其他諸如圖片、字體檔案或資料設定檔等資源。

前言

在學習使用webpack時，我們需要明白無論它怎麼設計，它的工作原理、流程是什麼，最根本的它處理的還是HTML文件中的HTML標籤、JavaScript、CSS、圖片等資源，而且最終的處理結果依然必須是一個HTML文檔，包括DOM、JavaScript、CSS，而CSS在文檔中的存在方式，有三種：行內樣式，內聯樣式，外鏈樣式，行內樣式使用方式早已不推薦，所以webpack處理CSS方式也就兩種：

1. 內聯樣式： 以

2. 外鏈樣式： 打包產生CSS文件，透過標籤引入樣式;

##webpack與CSS

我們知道，webpack本質是只能處理JavaScript的，而對於其他資源，需要使用載入器和插件將其處理成JavaScript模組，然後進行模組依賴管理。 webpack提供style-loader和css-loader兩個載入器支援我們模組化CSS，因此可以在其他模組內直接引入。

安裝

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

設定

#在webpack設定檔的模組載入器選項中新增下列設定：

  module: {
    loaders: [
      { test: /\.css$/, loader: "style-loader!css-loader" }
    ]
  }

當然為了方便使用參考路徑，也可以配置路徑片段別名：

  alias: {
    styles: path.resolve(__dirname, 'src/styles/')
  }

此時，

import 'styles/index.css';等同於使用相對路徑，如import '../src/styles/indx.css';

#使用

配置好以後，假如我們在styles目錄下創建了一個index.css文件，現在可以在JavaScript文件中直接引入該CSS: import 'styles/index.css'; 或require('styles/index.css');

#css內容如下：

  html, body {
    width: 100%;
    height: 100%;
  }
  .container {
    color: red;
  }

頁面展示如圖：

內聯樣式

前面提到了webpack處理CSS的方式有兩種，第一種是以內聯方式在頁面標籤內動態插入

以上是在webpack與SPA中如何管理CSS等資源的詳細內容。更多資訊請關注PHP中文網其他相關文章！