webpack4.0各个击破（2）—— CSS篇

`webpack`做为前端最火的构建工具，是前端自动化工具链**最重要的部分**，使用门槛较高。本系列是笔者本身的学习记录，比较基础，但愿经过**问题 + 解决方式**的模式，之前端构建中遇到的具体需求为出发点，学习`webpack`工具中相应的处理办法。（本篇中的参数配置及使用方式均基于`webpack4.0版本`）

webpack做为前端最火的构建工具，是前端自动化工具链最重要的部分，使用门槛较高。本系列是笔者本身的学习记录，比较基础，但愿经过问题 + 解决方式的模式，之前端构建中遇到的具体需求为出发点，学习webpack工具中相应的处理办法。（本篇中的参数配置及使用方式均基于webpack4.0版本）

一. CSS文件基本处理需求

假设项目中的CSS文件均采用预编译语言编写，那么在打包中须要处理的基本问题包括：

• 预编译语言转换
• 样式文件挂载方式选择
• 代码优化（合并及压缩）
• 去除或保留指定格式的注释
• 资源定位路径的转换
• 响应式布局单位转换【可选】
• 模块化【可选】
• 处理浏览器兼容【可选】

二. 解决方案的升级

• 旧的解决方案：预编译语言 + 命名方法论

  在不使用构建工具的时代，开发者使用预编译语言来实现变量定义，选择器嵌套等一些刚需，再使用函数功能来实现一些更为复杂的需求，例如编写简单的@mixin px2rem( )函数来将开发中使用的px单位转换为rem单位，达到移动端自适应的目的，或是编写一些处理兼容性的函数来处理浏览器兼容性。

  命名的方法论很是多，最为流行的当属BEM，也就是采用block__Element-Modifier这样的命名方式来进行模块划分，还有提倡碎片化样式的Aotm-CSS及面向对象的OOCSS等，都是一种命名方法论，也意味着没有硬性的检测和预防措施。

• 新的解决方案：预编译语言 + 构建工具 + BEM + ACSS全局样式+CSSModule组件样式+ POSTCSS

  预编译语言的使用基本不变，但现代化开发中已经再也不须要经过预约义函数来解决单位转换或是兼容性的问题。首先，构建工具能够经过自动化检测将预编译语言转换为CSS，基于现代化构建工具的CSS-Module功能，能够经过特定的语法解决CSS模块化的问题，而基于POSTCSS实现的autoprefixer插件，能够依据CanIUse网站提供的浏览器支持度数据实现代码的跨浏览器前缀自动补齐。

  新的方案涉及到不少新的概念，但这并非简单的炫技，每个概念都有优势和适用的场合，你须要在恰当的场合使用恰当的技术，最愚蠢的作法就是由于某种技术热门而盲目地要求开发人员在整个项目中使用。

三. 基本使用方法

3.1 经常使用插件及功能简述

以webpack4.0版本为例来演示CSS模块的处理方式，须要用到的插件及功能以下：

• style-loader——将处理结束的CSS代码存储在js中，运行时嵌入