demo11 webpack處理css

1.關於模塊

在 webpack 中，全部類型的文件都是模塊，好比 js、css、圖片、字體、json（能夠說是萬物皆模塊）。

可是，在普通的 js 代碼中，咱們直接 import (或require) 一張圖片或css是會報錯的。

但在 webpack 構建的項目中，歸功於 loader（加載器），webpack 可以把 js 的模塊化推廣至其餘類型文件，好比：

import('xxx.css'); // 經過css-loader處理
複製代碼

2.處理 css 爲何要經過 webpack

傳統引用 css 代碼的方式是在 html 經過 <style> 或 <link> 標籤來引入樣式。

可是這樣不是很方便，藉助 webpack 的 style-loader 和 css-loader 等 loader (或plugin)，咱們能夠實如今 .js 或者 .ts 中引用 css 文件，並讓樣式以 <style> 或者 <link> 的方式自動添加到 html 文件中。

3.相關 loader 或 plugin

css-loader: 實如今 js 代碼中加載 css 文件,並把 css 代碼轉化爲 js 的一個 module ,好比 import('./xxx.css')

style-loader: 實現把加載的 css 代碼做爲 style 標籤內容插入到 html 中

style-loader/url: 實現把加載的 css 代碼以 link 內容插入到 html 中

file-loader: 實現對文件進行處理，好比修改文件名，而且輸出到指定的路徑， file-loader 能夠單獨使用，也能夠和 url-loader 一塊兒使用

4.分別實現以 <style> 和 <link> 的方式引用 css

4.1 以 <style> 方式引用 css 須要的 loader 爲: css-loader + style-loader

webpack.config.js 關鍵配置以下：

rules: [
      {
        test: /\.css$/,
        // 以<style>標籤形式引用css
        use: [
          {
            loader: "style-loader",
            options: {
              singleton: true // 處理爲單個style標籤,註釋掉試試看?
            }
          },
          "css-loader"
        ]

      }
    ],
複製代碼

4.2 以 <link> 方式引用 css 須要的 loader 爲: file-loader + style-loader/url (與 style-loader 是同一個包)

webpack.config.js 關鍵配置以下：

rules: [
      {
        test: /\.css$/,
        // 以<link>標籤形式引用css
        use: [
          "style-loader/url",
          "file-loader"
        ]

      }
    ]
複製代碼

5.安裝相關依賴

npm install -D css-loader
npm install -D style-loader
npm install -D file-loader
複製代碼

6.目錄結構

// `--` 表明目錄， `-` 表明文件
  --demo11
    --src
      -app.js
      -style1.css
      -style2.css
    -index.html
    -webpack.config.js
複製代碼

src/app.js

// 同步加載
const style1 = import("./style1.css");
const style2 = import("./style2.css");


// window.addEventListener("click", function () {
// // 試試異步加載? 查看控制檯試試
// const style1 = import("./style1.css");
// const style2 = import("./style2.css");
// });
複製代碼

src/style1.css

body {
  background-color: red;
}
/* console.log('11111'); */
複製代碼

src/style2.css

body {
  color: black;
}
複製代碼

7.編寫 webpack 配置文件

webpack.config.js

const path = require("path");

module.exports = {
  entry: {
    app: "./src/app.js"
  },
  output: {
    publicPath: __dirname + "/dist/", // 打包後資源文件的引用會基於此路徑
    path: path.resolve(__dirname, "dist"), // 打包後的輸出目錄
    filename: "[name].bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 以<style>標籤形式引用css
        use: [
          {
            loader: "style-loader",
            options: {
              singleton: true // 處理爲單個style標籤,註釋掉試試看?
            }
          },
          "css-loader"
        ]

      }
    ],
    // rules: [
    // {
    // test: /\.css$/,
    // // 以<link>標籤形式引用css
    // use: [
    // "style-loader/url",
    // {
    // loader: "file-loader",
    // options: {
    // name: '[name].[hash].css'
    // }
    // }
    // ]

    // }
    // ]

  }
};
複製代碼

8.執行打包命令

(默認你已經安裝了全局 webpack 以及 webpack-cli )

webpack
複製代碼

9.查看打包結果

建立 index.html 文件,引用打包生成的主文件 (這裏是 app.bundle.js),

<script src="./dist/app.bundle.js"></script>
複製代碼

在瀏覽器打開，

在