Webpack样式处理机制详解

Webpack 的样式能力，说实话，真挺香的。你只要在JavaScript里扔一句require('style.css')，Webpack 立马就能动起来，把样式吃透、打包、注入，全流程搞定。

css-loader和style-loader是老搭档，前者负责把.css文件变成 JS 能读的格式，后者直接把样式塞进页面<style>标签里，页面刷新都不用手动搞，开发效率飙升。

配置上也不复杂，像下面这样写就行：

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        include: [path.join(__dirname, 'src')],
        use: ['style-loader', 'css-loader']
      }
    ]
  }
};

如果你是Less、Sass爱好者，直接在css-loader前面加个less-loader或sass-loader就完事了。Webpack 会先编译成 CSS，再往下走流程。

不过啊，到了生产环境，咱就别再搞内联样式了。文件太大，不利于性能。推荐用extract-text-webpack-plugin把 CSS 单独提出来，还能搭配 CDN 用，加载速度也更快。

配置如下：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        include: [path.join(__dirname, 'src')],
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css')
  ]
};

还有一个容易被忽略的点——浏览器前缀。以前得手动加，现在配合postcss-loader和autoprefixer，Webpack 能自动这些兼容性问题，省心多了。

先装插件：

npm install --save-dev postcss-loader autoprefixer

在配置里加上postcss-loader：

use: ExtractTextPlugin.extract({
  fallback: 'style-loader',
  use: ['css-loader', 'postcss-loader']
})

再配个postcss.config.js：

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

，如果你想把样式这一块搞得干净利落、性能也在线，Webpack 这套组合拳真挺值得用的。如果你对 Loader 机制还有兴趣，可以看看webpack 源码之 loader 机制，蛮有意思。