Webpack之CSS处理

发表于 | 分类于

Webpack是如何处理CSS的？

  • css-loader // css-loader interprets @import and url() like import/require() and will resolve them.
  • style-loader // 把上边处理好的样式作为style标签内容插入到html中
  • postcss-loader // 某些css要考虑到浏览器的兼容性(比如css3中的flex)，我们要webpack在打包的过程中自动为这些css属性加上浏览器前缀，这时就用到了postcss-loader和它对应的插件autoprefixer。
  • extract-text-webpack-plugin // 可以把css文件提炼出来

一、全部bundle在一起
webpack.config.js

1
2
3
4
5
6
7
8
9
10
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  }
}

二、提炼css文件出来
webpack.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: "css-loader"
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin("[name].css"),
  ]
}

——- postcss-loader 未完待续 ——

参考文档