webpack中对样式的处理

样式处理

样式部分，在开发阶段会涉及到使用预处理语言，如less、sass等；
如在vue的单文件组件中：

1
2
3
4
5
//lang表示使用到的预处理语言
<style scoped lang="less">
</style>

//当然设置lang的同时，需要配置处理该语言的loader，否则无法识别

在编译时，会涉及到兼容的处理、压缩

  1. 预处理
    此处例举如下几种预处理的使用
    less,sass,stylus
    例如less
    需要插件less-loader、less

  • less
    安装： 

    1
    npm i -D less less-loader

    配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    //省略...
    module:{
      rules:[
        //+++
        {
          test:/\.less$/,//less文件。vue中会将使用less写的样式抛出给该rule处理
          use:[
            'vue-style-loader',
            'css-loader',
            'less-loader' //与css文件的处理相比，多了先一步的less处理，处理完成后就是css
          ]
        },
        //+++
      ]
    }
     
    //省略...

    使用：

    1
    2
    3
    4
    5
    6
    <style lang="less" scoped>
    @color: white;
    body {
      background-color: @color;
    }
    </style>

  • sass
    安装： 

    1
    npm i -D node-sass sass-loader

    配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //省略...
    module:{
      rules:[
        //+++
        {
          //sass文件。vue中会将使用sass写的样式抛出给该rule处理.vue中lang可以设置为sass/scss，只需将两者类型都匹配到sass就行
          test:/\.(scss|sass)$/,
          use:[
            'vue-style-loader',
            'css-loader',
            'sass-loader' //与css文件的处理相比，多了先一步的sass处理，处理完成后就是css
          ]
        },
        //+++
      ]
    }
     
    //省略...

    使用：

    1
    2
    3
    4
    5
    6
    <style lang="sass" scoped>
    $color: white;
    body {
      background-color: $color;
    }
    </style>

  • stylus
    安装： 

    1
    npm i -D stylus stylus-loader

    配置：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    //省略...
    module:{
      rules:[
        //+++
        {
          //stylus文件。vue中会将使用stylus写的样式抛出给该rule处理.
          test:/\.stylus$/,
          use:[
            'vue-style-loader',
            'css-loader',
            'stylus-loader' //与css文件的处理相比，多了先一步的stylus处理，处理完成后就是css
          ]
        },
        //+++
      ]
    }
     
    //省略...

    使用：

    1
    2
    3
    4
    <style lang="stylus" scoped>
    body
      background-color #fff
    </style>

    vue中支持好几种css预处理，vue的脚手架中有专门生成cssloader部分。但是需要手动安装相应的loader和依赖。

  1. 兼容
    兼容处理主要处理一些css属性的兼容，比如transform，有的需要加上-webkit-前缀才能支持；
    可以在编译的时候根据需要兼容的浏览器自动处理需要兼容的属性。
    需要使用到的插件：
    postcss-loader
    postcss-import
    autoprefixer

    安装:

    1
    npm i -D postcss-loader postcss-import autoprefixer

    配置：webpack.config.js:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    //+++
    {
        test: /\.less$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'postcss-loader', //需在css-loader/style-loader后面，在其他预处理前面
          'less-loader'
        ]
      },
    //++

    在webpack.config.js的同目录下新建 .postcssrc.js 文件，内容如下:

    1
    2
    3
    4
    5
    6
    module.exports = {
      plugins: {
        'postcss-import':{}, //在css文件中有使用@import时，需要这个插件。使用预处理的时候不需要
        'autoprefixer': {} //自动增加前缀，就是做兼容处理。具体的兼容配置在package.json中配置。
      }
    }

    设置浏览器兼容版本，在package.json中配置：
    详细配置参考 browserslist

    1
    2
    3
    4
    5
    6
    7
    8
    9
    //+++
    "browserslist": [
      "> 1%",
      "last 2 versions",
      "not ie <= 8",
      "iOS >= 7",
      "Android > 4.1"
    ]
    //+++

  2. 压缩

    optimize-css-assets-webpack-plugin //css压缩
    uglifyjs-webpack-plugin //js压缩已经内置到 webpack4 中。但是css的压缩并没有。配置的时候如果不配置js压缩，只配置css压缩，则js不会压缩，需要同时配置。
    详细配置见：uglifyjs-webpack-plugin

    安装：

    1
    npm i -D optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin

    配置（包括js的压缩）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    //+++
    const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
    //++

    //省略...
    plugins:[],
    //+++
    optimization: {
        minimizer: [
          new UglifyJsPlugin({//js压缩
            cache: true,
            parallel: true,
            sourceMap: true 
          }),
          new OptimizeCSSAssetsPlugin({})//css压缩
        ]
      }
    //+++

本文地址： http://gehaiqing.com/2018/07/06/webpack-4-style/