webpack4.0使用 css
（注：示例中的 app 文件夹是书写代码文件夹，public 文件夹是书写代码编译后的文件夹）
1、使用 css
1> 创建 index.css 样式文件
2> 入口 JS 文件中引入 index.css
3> 安装 css-loader 、 style-loader 依赖 （安装完成后，再配置相关依赖就可以正常书写 css 样式），
css-loader：解析 css
style-loader： 将解析的 css 放入<style>....css代码</style> 节点中，并将节点引入<head></head>中
执行命令： npm install _D css-loader style-loader ，生成如下配置
4> 配置安装好的依赖
5> 编译代码 （此处以 npm run build 为例），生成如下样式
（是不是感觉这样直接引入节点样式不是很爽，那么接下来就把这些样式文件抽离成一个 单独的 css文件）
2、抽离 书写的 css 样式为一个单独文件（此处介绍最方便的方法，其它方法官网有介绍）
（在 1 的基础上进行接下来的操作）
1> 安装 file-loader 依赖(引入文件作用)
执行命令：npm install -D file-loader,生成如下配置
2> 配置 file-loader 依赖 并执行编译命令（示例为 npm run build）
3> 在页面中引入
3、使用 sass（less 与 sass 同理）
1> 创建 scss 文件（如：index.scss）并在 js 入口文件头部引入创建的 scss 文件
2> 安装 sass-loader 、css-loader 、 style-loader 依赖后，（安装完成后，再配置相关依赖就可以了使用 sassl）
执行命令：npm install -D sass-loader css-loader style-loader，成功执行命令后 package.json 文件中会生成如下配置
sass-loader：将 sass 解析成 css
css-loader：解析 css
style-loader：将解析的 css 放入 <style>....css代码</style> 节点中，并将节点引入<head></head>中
（注：如有关于 node-sass 报错问题，则安装下 npm install -D node-sass 该依赖不用配置）
3> 配置 sass-loader 、css-loader、style-loader依赖 ；配置完后 执行命令 npm start | npm run build ，具体执行哪个编译命令，看个人的配置
（注：注意三者执行顺序是 由 后 -> 前 执行）
是不是感觉直接在页面中插入 css 样式节点不是很爽，那么接下来就把这些 css 样式节点抽离成一个单独的css文件
4、抽离 sass 编译后生成的 css 为一个单独的 css 文件
（在 2 的基础上进行接下来的操作，些许改动下面文本会注释）
1> 安装 抽离插件 npm install -D mini-css-extract-plugin（ >webpack4.0 版本插件），生成如下配置
2> 配置 mini-css-extract-plugin 插件（改动：去掉 style-loader 依赖，换成 mini-css-extract-plugin 依赖）
3> 执行编译命令：npm run build 生成如下文件：
4> 在页面（index.html）中引入抽离后生成的 index.css 文件，之后便可以看到书写的样式
（是不是感觉光抽离一个文件不够爽？是不是感觉平时写css样式总是要加上一些浏览器兼容性的前缀？接下来就让我解放写兼容浏览器前缀的css的双手）
5、postcss-loader 样式处理工具，通过JS插件将 css 转换成需要兼容浏览器版本的 css ，即给兼容浏览器版本的css加上相应的前缀
postcss执行流程：
将css解析成抽象语法树（AST）
将AST传递给任意插件处理
将处理完的AST树重新转换成字符串
（在根目录下新建一个postcs.config.js 用于放置 postcss 插件的配置，原因是postcss含有200多个插件，不适用于放在webpack.config.js下配置插件）
示例：
1> 安装 postcss-loader依赖，以及配置依赖
执行命令 ：npm install -D postcss-loader 生成如下配置
（注：postcss-loader放在less/sass-loader之前，css-loader、style-loader之后）
2> postcss插件
（以示例，都是在配置完成后，编译代码（npm run build）后的示例结果）
。autoprefixer ：安装插件 npm install -D autoprefixer,生成如下配置
作用：为配置的浏览器自动加上兼容处理的 前缀
配置插件：
。postcss-cssnext：npm install -D postcss-cssnext
作用：
允许开发人员使用将来css版本可能新加入的特性，包含 autoprefixer 作用
配置插件：
功能：
。自定义属性和变量：允许在 css 中定义属性并在样式规则中作为变量来使用 （创建：-> : root { --变量名:样式 ; } -> 使用：属性名：var(--变量名）
。自定义选择器：选择一类元素（创建 ：@custom-selector: --head h1,h2,h3,h4,h5 -> 使用：）
。cssnano：npm install -D cssnano
作用：类似码压缩插件
配置插件：
。postcss-pxtorem：npm install -D postcss-pxtorem
作用：将px转为rem
配置插件：
浙公网安备 33010602011771号