webpack 深入浅出分析之style-loader、css-loader、配置sass与less

一、webpack 打包 style-loader

1. 创建一个空文件夹，通过 npm init 初始化创建 package.json 文件，通过 npm install webpack --save-dev 命令下载 webpack，通过 npm install style-loader css-loader --save-dev 命令下载 style-loader 和 css-loader。

2. 创建 css 文件夹，在里面创建 base.css 和 common.css，代码如下所示：

• base.css

html {
    background-color: blueviolet;
}

• common.css

body {
    font-size: 20px;
}

3. 创建 app.js 文件，引入 base.css 和 common.css，use 代表样式的使用， unuse代表样式的不使用。同时也创建 css.transform.js 文件，代码如下所示：

• app.js

import base from './css/base.css'
import common from  './css/common.css'

var flag = false

setInterval(function () {
    if (flag) {
        base.unuse()
    } else {
        base.use()
    }
    flag = !flag
}, 500)

• common.css

module.exports = function (css) {
    console.log(css)

    if (window.innerWidth >= 768) {
        return css.replace('blueviolet', 'red')
    } else {
        return css.replace('blueviolet', 'green')
    }
    
}

4. 创建 webpack.config.js 文件，通过 require 引入 path 路径，entry 配置入口文件，output 配置出口文件，配置 output、publicPath 和 filename。配置 rules，test 表示匹配的值为以 .css 文件结尾的，use 表示使用的各种 loader。 style-loader 是创建一个style标签，style-loader/url是在html中插入一个link标签(配合file-loader使用)，一个很小众的功能，会把每个import的css都处理成一个link标签，造成加载资源的增加，不利于优化。style-loader/useable是在style中控制样式插入或者不插入，import了css后可以使用 .use() 或者 .unuse()的方法来控制样式是否插入。file-loader是生成一个新的css文件。css-loader是允许js来import一个css文件。所以，使用 style-loader 和 css-loader。在 style-loader 进行 options 配置，insertInto 是插入到 DOM，singleton 是是否只使用一个style标签，会将多个引入混合为一个 style 标签插入页面，transform 是可以执行一个js，在 loader执行的时候执行，也就是浏览器环境，能拿到浏览器的相关信息，insertAt 是插入位置 ，代码如下所示：

var path = require('path')

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/',
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            insertInto: '#app',
                            singleton: true,
                            transform: './css.transform.js'
                        }
                    },
                    {
                        loader: 'css-loader'
                    }
                ]
            }
        ]
    }
}

二、webpack 打包 css-loader

1. 按照之前 style-loader 所创建的项目进行更改，更改 base.css、common.css 和 app.js 文件，同时也将 common.css 通过 composes 引入到 base.css 中，代码如下所示：

• common.css

  body {
      font-size: 20px;
  }
  
  .bigBox {
      border: 2px solid #333;
  }
  

• base.css

  html {
      background-color: blueviolet;
  }
  
  .box {
      composes: bigBox from './common.css';
      height: 200px;
      width: 200px;
      border-radius: 20px;
      border: 4px;
      background-color: cadetblue;   
  }
  

• app.js

  import base from './css/base.css'
  import common from  './css/common.css'
  
  
  var app = document.getElementById('app')
  app.innerHTML = '<div class="'> + base.box +'"</div>'
  
  

2. 在 webpack.config.js 文件中，更改 css-loader 的配置信息。在 options 配置信息中，alias 是解析的别名，importLoader 是 @import 引入其它的 loader，Minimize 是是否开启压缩，modules是是否启用css-modules模块化。通过 : local 可以使用局部的样式，通过 : global 可以使用全局的样式，通过 compose 可以继承一段样式，通过 compose … from path 可以引入一段样式，通过 localIdentName: '[path][name]__[local]--[hash:base64:5]' 可以定义编译出来的 class 名称，代码如下所示：

var path = require('path')

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/',
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            singleton: true,
                            transform: './css.transform.js'
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            localIdentName: '[path][name]_[local]_[hash:base64:5]'
                        }
                    }
                ]
            }
        ]
    }
}

三、webpack 打包配置 Less 和 Sass

1. 通过 npm install less-loader less --save-dev 命令下载 less，通过 npm install sass-loader node-sass --save-dev 命令下载 sass。

2. 按照上面的项目文件，更改 base.css 和 common.css 为 base.less 和 common.less，代码如下所示：

• base.less

  @homeColor: red;
  
  html {
      background-color: @homeColor;
  }
  
  .box {
      composes: bigBox from './common.less';
      height: 200px;
      width: 200px;
      border-radius: 20px;
      border: 4px;
      background-color: cadetblue;   
  }
  

• common.less

  body {
     font-size: 20px;
  }
  
  .bigBox {
     border: 2px solid #333;
  }
  

3. 在 webpack.config.js 文件中，添加 less-loader，代码如下所示：

var path = require('path')

module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        publicPath: './dist/',
        filename: '[name].bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    {
                        loader: 'style-loader',
                        options: {
                            singleton: true,
                            transform: './css.transform.js'
                        }
                    },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            localIdentName: '[path][name]_[local]_[hash:base64:5]'
                        }
                    },
                    {
                        loader: 'less-loader'
                    }
                ]
            }
        ]
    }
}