3. 加载 CSS 资源

vue2-webpack4-project

为了从 JavaScript 模块中 import 一个 CSS 文件，需要在 module 配置中 安装并添加 style-loader 和 css-loader。

1. 安装 loader

<!--需要安装支持webpack4的版本-->
 yarn add  style-loader@2.0.0 css-loader@5.2.7 -D

• style-loader 最新版本 3.x.x 最低兼容 webpack5，所以选择低版本 2.0.0
• css-loader 最新版本 6.x.x 最低兼容 webpack5，所以选择低版本 5.2.7

2. 修改 webpack 配置

const path = require('path');
module.exports = {
    // 指定打包模式：development、production
    mode: "development",
    // entry 对象是用于 webpack 查找启动并构建 bundle。其上下文是入口文件所处的目录的绝对路径的字符串。
    entry: './src/index.js',
    // 输出文件配置
    output: {
        // 文件名称
        filename: 'main.js',
        // 文件路径
        path: path.resolve(process.cwd(), 'dist')
    },
    module: {
        rules: [
            //添加 css 支持
            {
                test: /\.css$/i,
                use: ['style-loader', 'css-loader']
            }
        ]
    }
};

3. 添加 css 文件

.hello {
    color: red;
}

4. 修改 js 文件

import "./index.css"
//生成一个内容为Hello webpack !的div标签
function component() {
    const element = document.createElement('div');
    element.innerHTML = "Hello webpack !";
    element.classList.add("hello")
    return element;
}
//将生成的div标签添加到body中去
document.body.appendChild(component());

5. 执行打包

yarn run build

等待打包完成后，打开 index.html 文件能显示红色的 Hello webpack ! 。