第三个td加上红色样式_Webpack4 学习 - 03：loader 打包静态资源（样式）

使用 style-loader，css-loader 打包 css 文件

首先在src目录下创建一个 index.css 文件，内容如下：

.this_style { color: red;}

修改 index.js 文件内容如下：

import './index.css';var root = document.getElementById('root');var wp = document.createElement('div');wp.innerText = 'Hello, Webpack';wp.classList.add('this_style');root.append(wp);

代码的内容是创建一个div，并把this_style的样式赋给它，使它的字体变为红色。然后直接运行 npm run bundle 来打包会报错吗？当然会了，因为之前说过 webpack 只能处理 js 文件，遇到 css 文件时，它就不知道该怎么办了。所以我们就配置一下 webpack.config.js 来告诉它怎么做，配置内容如下：

const path = require('path'); // 得到的path为webpack.config.js所在的目录module.exports