加载 css

加载方式1：style 标签

加载 css 需要安装 css-loader 和 style-loader。

npm i -D css-loader style-loader

css-loader 用来识别并加载 css，style-loader 用来将 css 转化为 html 的 style 节点，首先需要在配置文件中新增如下规则。

module.exports = {
    ...
    module: {
    rules: [
      {
        test: /.css$/i,
        use: [
          'style-loader', 'css-loader'
        ]
      }
    ]
  }
}

创建CSS文件

body {
  background: yellowgreen;
}

以JS形式引入

import './index.css'

<style> 是由 js 代码动态插入的。

加载方式2：独立 css 文件

一般来说，我们都希望 css 代码是独立在一个 css 文件里，与 html 和 js 分开来，而 mini-css-extract-plugin 插件就是用来将 css 提取到单独文件。

npm i -D mini-css-extract-plugin

既然我们决定要用 mini-css-extract-plugin，那么 style-loader 就不需要用到了。

webpack.config.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    ...
    plugins: [
        ...
        new MiniCssExtractPlugin()
    ],
    module: {
    rules: [
          {
            test: /.css$/i,
            use: [
              //'style-loader', 'css-loader'
              MiniCssExtractPlugin.loader, 'css-loader'
            ]
          }
      ]
    }
}

2.加载图片

在 webpack.config.js 进行配置。

module: {
    rules: [
      ...
      {
        test: /.(jpe?g|png|svg|gif)/i,
        type: 'asset/resource'
      }
    ]
}

在 index.js 引入图片

import './assets/img/ZZ.jpg'

运行 npm run build。

核心思想：将一切可以管理引入的东西视作JS