Webpack——样式处理

1.style-loader与css-loader

css-loader负责解析css相关文件。

style-loader负责在html文档中插入解析后的css文件。所以style-loader一定要在css-loader之后生效才可以
写法：['style-loader', 'css-loader'](webpack解析从后向前解析)

完整配置：

1 {
2     test: /.css$/,
3     use: ['style-loader', 'css-loader']
4 }

style-loader还有一些其他用法例如: 生成标签的位置。在生成css文件前可以做全局修改。可以定义生成的style的形式例如link。
style新版本中已经不支持insertAt语法了,以前的inserAt:'top'甚至insert: 'top'都是会报错的。建议直接阅读下面的文档。
文档地址：https://www.npmjs.com/package/style-loader
2.less-loader的配置

{
    test: /.less$/,
    use: ['style-loader', 'css-loader', 'less-loader']
}

　sass,stylus等css扩展语法也是一样的配置。切记配置的顺序，不能搞错

3.mini-css-extract-plugin插件
上面的配置以后，打包以后的css会形成style标签全部加载到html里面。当样式过多的时候，可能会造成阻塞。
所以我们应该使用插件将css从中抽离出来。

plugins：[
    new MiniCssExtractPlugin({
        filename: 'a.css'
    })
],
module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      },
      {
        test: /\.less$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
      }
    ]
}

　以上的配置会将css和less最后都分离出来，最终命名为一个叫做a.css文件。如果想将less和普通css分离成两个文件，那么需要new两个插件对象，分别放在不同的rules里面。
3.postcss-loader和autoprefixer插件
这两个东西是给我们的css增加浏览器前缀的。使用方法：

需要在webpack.config.js同级目录下建立一个文件postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

然后在package.json里面加入

"browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
]

这个列表是支持不同浏览器的含义。但是这种配置是全局公用的。也可以配置成私有的（只有autoprefixer使用的列表）
然后在loader中这么配置。

module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader']
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader']
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader']
      }
    ]
}

4.optimize-css-assets-webapck-plugin插件压缩css相关文件

optimization: {
    minimizer: [
      new OptimizeCssPlugin()
    ]
}

这个时候打包会发现，抽离出来的css文件被压缩了。但是js文件不会被压缩了。
所以还需要手动压缩js文件：我们需要使用uglifyjs-webpack-plugin插件

optimization: {
    minimizer: [
      new UglifyjsWebpackPlugin({
        cache: true,    // 缓存
        parallel: true, // 并发打包
        sourceMap: true // 源码映射
      }),
      new OptimizeCssPlugin()
    ]
}

Webpack——样式处理

推荐阅读