webpack---配置Sass、Less、PostCSS及加载样式文件的多种方式

在搭建初步的webpack脚手架中对webpack的配置有了初步的学习，接下来针对样式文件的抽离进一步进行学习。

1、准备工作

安装Sass和Less及其加载器

Less、Sass 扩展了原生的CSS 语言。
Less 是一门 CSS 预处理语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能。
都是Css语法糖，习惯哪个用哪个。

npm i -s-d node-sass sass-loader
npm i -s-d less less-loader

安装PostCSS及配置

PostCSS鼓励开发者使用规范的CSS原生语法编写源代码，支持未来的css语法，自动补全浏览器前缀，自动把px代为转换成rem。

npm i -s-d postcss-loader autoprefixer

额外添加一个postcss.config.js文件，并配置好支持哪些浏览器。

//postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')({
            "browsers": [
                "defaults",
                "not ie < 11",
                "last 2 versions",
                "> 1%",
                "iOS 7",
                "last 3 iOS versions"
            ]
        })
    ]
}

或者在package.json中配置browserslist

// package.json
{
  "name": "webpackCabin",
  ···
  "dependencies": {···},
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
}
// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}

或者配置.browserslistrc文件

// postcss.config.js
module.exports = {
    plugins: [
        require('autoprefixer')
    ]
}
// .browserslistrc
# Browsers that we support
defaults,
not ie < 11,
last 2 versions,
> 1%,
iOS 7,
last 3 iOS versions

2、将样式文件载入页面head标签中

webapck提供了很多加载器，包括前面安装的less-loader，sass-loader，postcss-loader等等。我们可以在规则数组里添加他们，从而修改模块的创建方式，对模块应用相应的loader。
最简单的就是直接使用加载器数组，需要注意的是，加载器的执行是从右到左的。
配置webpackConfig.js

module.exports = {
   ···
    module: { // 模块
        rules: [{// 规则数组
            test: /\.css|scss|less$/, use: ['style-loader', 'css-loader', 'less-loader', 'sass-loader', 'postcss-loader'], 
        }]
    },
    ···
}

先补全浏览器前缀，再解析sass、less，再使用css加载器处理@import,最后使用style加载器将样式文件插入head标签，在默认情况下是插在head标签的尾部。黄色框是页面中原有是样式表，绿色框是加载器载入的样式表，蓝色框是自动补全的浏览器前缀。这里的页面背景色会呈现天空蓝。

2、将样式文件单独抽离

安装插件mini-css-extract-plugin

npm i -s-d mini-css-extract-plugin

配置webpackConfig.js

···
let MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
    ···
    module: { // 模块
        rules: [{// 规则数组
            test: /\.css|scss|less$/,
            // 使用插件载入样式文件
            use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader', 'sass-loader', 'postcss-loader'],
        }]
    },
    plugins: [// 数组，存放所有的webpack插件
      ···
        new MiniCssExtractPlugin({// 配置样式文件抽离插件
            filename: '[name].css'
        })
    ]
}