webpack 样式处理

分离样式文件

1. exract-text-webpack-plugin 4.0以下的版本
   npm install extract-text-webpack-plugin

const ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
  entry: './app.js',
  output: {
    filename: 'bundle.js',
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader', // 当指定插件无法提取样式时所采用的loader
          use: 'css-loader' // 指定在提取样式之前采用哪些loader来预先处理
        })
      }
    ]
  },
  plugins: [ // 接收一个插件数组
    // 单文件 new ExtractTextPlugin('bundle.css') // 传入提取后的资源文件名
    // 多文件
    new ExtractTextPlugin('[name].css') // [name]指的是chunk的名字
  ]
}

2. mini-css-extract-plugin 4.0以上官方推荐版本， exract-text-webpack-plugin的升级版
   支持按需加载css

const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
  entry: './app.js',
  output: {
    filename: [name].js',
  },
  mode: 'development',
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              publicPath: '../' // 用来指定异步css的加载路径
            }
          },
          'css-loader'
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css', // 同步加载的css资源名
      chunkFilename: '[id].css' // 异步加载的css资源名
    }) // [name]指的是chunk的名字
  ]
}

我自己测试，并没有打包出多个css

样式预处理

scss less等 要转为css
sass有两种语法，scss使用最多，所以在安装和配置时都是sass-loader,而文件是 .scss
sass-loader scss语法编译为css 只是起到黏合的作用
node-sass 编译scss
npm install sass-loader node-sass
安装node-sass时，需要下载一个系统相关的二进制包，下载可能超时，可设置cnpm
npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass

rules: [
  {
    test: /\.scss$/,
    use: ['style-loader', 'css-loader', 'sass-loader']
  }
]
// 配置sourceMap
rules: [
  {
    test: /\.scss$/,
    use: ['style-loader',
      {
        loader: 'css-loader',
        options: {
          sourceMap: true
        }
      },
      {
        loader: 'sass-loader',
        options: {
          sourceMap: true
        }
      }
    ]
  }
]

less与scss类似

npm install less-loader less

rules: [
  {
    test: /\.less$/,
    use: ['style-loader',
      {
        loader: 'css-loader',
        options: {
          sourceMap: true
        }
      },
      {
        loader: 'less-loader',
        options: {
          sourceMap: true
        }
      }
    ]
  }
]

postCss

不算是css预编译器，只是编译插件的容器
npm install postcss-loader

rules: [
  {
    test: /\.css/,
    use: [
      'style-loader',
      'css-loader',
      'postcss-loader'
    ]
  }
]

需要一个配置文件，在根目录创建 postcss.config.js
// postcss.config.js:

module.exports = {}

stylelint css的质量检查工具

npm install stylelint
postcss.congif.js:

module.exports = {
  plugins: [
    stylelint({
      config: {
        rules: {
          'declaration-no-important': true // 当代码中出现!important会给出警告
        }
      }
    })
  ]
}

cssnext

postcss 与 cssnext结合，可使用css最新语法
npm install postcss-cssnext
postcss.congif.js:

module.exports = {
  plugins: [
    postcssCssnext({
      browsers: [
        '>1%',
        'last 2 versions'
      ]
    })
  ]
}

CSS Modules

1. 每个css文件中样式都有单独的作用域
2. 对css依赖管理，可通过相对路径引入
3. 可复用其它css模块

只要开启css-loader中的modules配置项即可

rules: [
  {
    test: /\.css/,
    use: [
      'style-loader',
      {
        loader: 'css-loader',
        options: {
          modules: true,
          // 指明css代码中的类名如何编译 .style__title__1CFy6
          // name 模块名 local 选择器标志符 hash:base64:5 五位hash值
          // hash是根据模块名和标识符计算的
          localIdentName: '[name]__[local]__[hash:base64:5]'
        }
      }
    ]
  }
]

css modules文件导出一个对象

// style.css:
.title {
  color: red;
}
// app.js:
import styles from './style.css'
document.write(`<h1 class="${styles.title}">test css modules </h1>`)