06- webpack 加載 CSS

爲了在 JavaScript 模塊中 import 一個 CSS 文件，須要使用 style-loader 和 css-loader，對CSS文件進行處理；而後，在此模塊執行過程當中，將含有 CSS 字符串的 <style> 標籤，插入到 html 文件的 中。

1、安裝 loader

npm install --save-dev style-loader css-loader
//或者
yarn add style-loader css-loader --dev
複製代碼

2、編輯 webpack.config.js 文件

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'
         ]
       }
     ]
   }
 };
複製代碼

webpack 根據正則表達式，來肯定應該查找哪些文件，並將其提供給指定的 loader。在這個示例中，全部以 .css 結尾的文件，都將被提供給 style-loader 和 css-loader。

3、添加 CSS 文件並使用

3.1 添加 style.css 文件

在 /src 目錄中添加一個新的 style.css 文件，並將其 import 到 index.js 中：

webpack-demo
  |- package.json
  |- webpack.config.js
  |- /dist
    |- bundle.js
    |- index.html
  |- /src
    |- style.css
    |- index.js
  |- /node_modules
複製代碼

style.css

.hello {
  color: red;
}
複製代碼

3.2 編輯 index.js

import "./style.css"
//生成一個內容爲Hello webpack !的div標籤
function component() {
    let element = document.createElement('div');
    element.innerHTML = "Hello webpack !";
    //添加class
    element.classList.add("hello");
    return element;
}
//將生成的div標籤添加到body中去
document.body.appendChild(component());
複製代碼

4、 運行 build 命令

npm run build
//或者
yarn build
複製代碼

yarn run v1.16.0
$ webpack
Hash: 319dbf117b6cd4a0fa81
Version: webpack 4.35.3
Time: 511ms
Built at: 07/17/2019 4:26:23 PM
    Asset      Size  Chunks             Chunk Names
bundle.js  6.97 KiB       0  [emitted]  main
Entrypoint main = bundle.js
[0] ./src/index.js 285 bytes {0} [built]
[1] ./src/style.css 1.06 KiB {0} [built]
[2] ./node_modules/css-loader/dist/cjs.js!./src/style.css 165 bytes {0} [built]
    + 3 hidden modules

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/
✨  Done in 1.18s.

複製代碼

再次在瀏覽器中打開 index.html，你應該看到 Hello webpack 如今的樣式是紅色。

5、 驗證

在Chrome瀏覽器中右鍵單擊選擇檢查頁面（不要查看頁面源代碼，經過js動態插入的，因此看不到），並查看頁面的 head 標籤。能夠看到包含 style 塊元素，也就是在 index.js 中 import 的 css 文件中的樣式。

參考連接

• 管理資源
• 示例代碼