【webpack4 系列之五】

Webpack4 如何处理css

• https://github.com/hyyfrank/webpack4 branch: feature/lesson5

• 我们需要做什么

  • 支持css的处理

  • 把css抽取成单独的css文件

  • 支持css module

  • 支持css next等新特性

  • 支持css style lint校验

  • 减少无用的css代码

  • 使用post css做些处理比如autoprefix,css-next

  • 最小化css文件

• 需要什么loader和plugin

  loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

  • loader:

    • sass-loader: 简单说就是sass转换成css

    • postcss-loader: postcss很强大，可以这么简单理解下，css-->ast-->plugin-->xxxx,大概就是，先把css转化为抽象语法树，然后使用javascript处理，然后厉害的就是，真的啥都有个插件，只有想不到!

    • css-loader:The css-loader interprets @import and url() like import/require() and will resolve them.选项我们会用到modules, localIdentName

    • style-loader:Adds CSS to the DOM by injecting a