何大小成

css-loader · style-loader

loaders 含义
css-loader 解析css文件，通过import加载，返回css
style-loader 通过添加<style>把css添加到DOM

建议将 style-loader 与 css-loader 结合使用

用法：
1.开发环境中，加载css文件

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

2.生产环境中，通过extract-text-webpack-plugin从bundle提取css，实现并行加载css资源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const env = process.env.NODE_ENV
const ExtractTextPlugin = require('extract-text-webpack-plugin');
modules.export = {
  moudle:{
    rules: [
      {
        text: /\.css$/,
        use: [env === 'production'? ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: ['css-loader']
        }): ['style-loader', 'css-loader']]
      }
    ],
    plugins: env === 'production' ? new ExtractTextPlugin({
      filename: '[.name].css'
    }):[]
  }
}