webpack4 初体验-资源管理-加载CSS

继续上一篇博文[webpack4 初体验]

加载 CSS

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

webpack 根据正则表达式，来确定应该查找哪些文件，并将其提供给指定的 loader。在这种情况下，以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader。

这使你可以在依赖于此样式的文件中 import './index.css'。现在，当该模块运行时，含有 CSS 字符串的 标签，将被插入到 html 文件的 中。

我们尝试一下，通过在项目中添加一个新的 index.css 文件，并将其导入到我们的 index.js 中：

项目目录结构

src/style.css

src/index.js

现在运行构建命令：

再次在浏览器中打开 index.html，你应该看到 Hello webpack 现在的样式是红色。要查看 webpack 做了什么，请检查页面（不要查看页面源代码，因为它不会显示结果），并查看页面的 head 标签。它应该包含我们在 index.js 中导入的 style 块元素。

请注意，在多数情况下，你也可以进行 CSS 分离，以便在生产环境中节省加载时间。最重要的是，现有的 loader 可以支持任何你可以想到的 CSS 处理器风格 - postcss, sass 和 less 等。

项目地址

https://github.com/durban89/webpack4-demo.git