build-styles-loader

每次写 webpack 配置，都需要写 style, css, sass, less, yaml, json, file, url 等这些 loader， 而且在不同的环境写配置还不一样，感觉有点麻烦。所以我写了此插件，你只需要这样配置 webpack.config.js 文件

var buildStylesLoader = require('build-styles-loader');
 
// 环境变量，buildStylesLoader 需要，它会根据不同的环境生成不同的配置
var nodeEnv = process.env.NODE_ENV || 'development';
var env = {
  DEV: /dev/i.test(nodeEnv),
  BUILD: /(build|prod)/i.test(nodeEnv),
  TEST: /test/i.test(nodeEnv),
};
 
var webpackConfig = {
  // ...
};
 
// loaders 需要的一些配置
var config = {
  ExtractTextPlugin: require('extract-text-webpack-plugin'), // 必传的一个属性
  cssFileName: 'xxx.css',  // 使用 `extract-text-webpack-plugin` 生成的 css 文件的名称
  cssLocalName: '', // 指定 local 的名称，如果不配置会使用默认的配置
  isServerSide: false, // 如果是服务端渲染，则不需要生成 css，只需要 css local 名称即可
  inlineFileSize: 4096, // 如果图片文件小于指定的大小，会内嵌在样式中
  browsers: ['last 5 version', 'ie >= 8'], // 传给 autoprefixer 用的
  postcss: [], // postcss 的插件，默认会添加 autoprefixer
  sass: {}, // sass-loader 需要的配置
  less: {}, // less-loader 需要的配置
  css: {} // css-loader 需要的配置
};
 
module.exports = buildStylesLoader(webpackConfig, env, config);

上面的配置文件会生成几种不同类型的 loader，这里以 sass 为例（css 和 less 也一样）

// 样式是全局的，并在 BUILD 模式下样式会抽取成一个单独的文件
require('foo.scss');

// 样式是局部的，在 BUILD 模式下也会抽取成一个单独的文件
var local = require('foo.scss?local');

// 样式是全局的，在 BUILD 模式下样式不会抽取成一个单独的文件
require('foo.scss?inline');

// 样式是局部的，在 BUILD 模式下样式不会抽取成一个单独的文件
require('foo.scss?inline&local');