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 = { entry: { main: ‘./src/index.js’ }, output: { filename: ‘bundle.js’, path: path.resolve(__dirname, ‘dist’) }, module: { rules: [{ test: /.css$/, use: [‘style-loader’, ‘css-loader’] }] }, mode: ‘development’}然后安装 style-loader 和 css-loader：npm install style-loader css-loader -D安装完之后，执行打包命令，没有报错，就说明 webpack 已经正确打包好了 css 文件。打开 index.html 可以看到，字体的颜色已经变成了红色：下面大概来说一下 style-loader 和 css-loader 做了哪些工作，详细的说明可以去看官方文档。在src目录下再新建一个 test.css 文件，给 this_style 样式加一个背景色：.this_style { background-color: #999999; /* 灰色 */}然后在 index.css 文件中引入 test.css：@import ‘./test.css’;.this_style { color: red;}执行打包命令，打开 index.html 查看结果:打包成功, 背景色显示了出来。在这段打包的过程中，css-loader 会根据 css 的语法，比如 @import.. 分析出几个 css 文件的关系，然后把它们合并成一段 css，style-loader 在得到 css-loader 生成的内容之后，会把这段内容添加到指定的内页元素上，最后呈现出上图的结果。