webpack中css配置(模块化、抽离等)

模块化

方便控制局部和全局的样式，使用css-loader实现。

写的项目是个脚手架，这边是为了兼容，公司里很多前端项目都已经集成了这个脚手架，所以要适用styles.xxx这样的写法也要能直接className="xxx"。重点在modules: 'global'，默认全局，想用局部的地方自己加:local。

还可以用babel-plugin-react-css-modules进一步简化写法，但是这边不是新的项目就没有用。

{
  test: /\.less$/,
  use: ['css-hot-loader', 'style-loader', {
    loader: 'css-loader',
    options: {
      importLoaders: 2,
      localIdentName: '[name]--[local]--[hash:base64:5]',
      sourceMap: true,
      modules: 'global'  //重点
    }
  }, {
    loader: 'postcss-loader',
    options: {
      config: {
        path: path.join(__dirname, './postcss.config.js')
      }
    }
  }, {
    loader: 'less-loader',
    options: {
      sourceMap: true
    }
  }]
}

前面的尝试里，碰到过使用modules:true的时候，和antd有冲突，把antd的也去解析成hash了，引入的时候就找不到了，解决方式是配两份less的test，一份exclude掉node_modules，一份include node_modules，include的modules:false就行。现在改成了global就不会有这种问题，默认都是全局了。

抽离css

采取的方式是在dev下使用style-loader，在prod下使用mini-css-extract-plugin分离css成一个单独的文件在html中引入。环境变量定义好，把开发和生产的webpack.config配置分离开，便于做这种不同环境的配置。

代码参考上面的，要注意loader里的执行顺序，从右到左，从下到上。

遗留问题

本来是使用happypack来解析loader的，为了提速。但是目前项目中mini-css-extract-plugin+happypack+css-modules就会报错，所以就暂时去掉了对less的happypack loader。

概念和文档能找到的东西就不写了 自行查找~