css-loader-with-optionPlugin example

css-loader-with-optionPlugin.js

if (process.env.NODE_ENV === undefined) {
  process.env.NODE_ENV = 'development';
}

const webpack = require('webpack');
const brfs = require('brfs');
const autoprefixer = require('autoprefixer');

const libraryName = process.env.NODE_ENV === 'development' ? '[name]' : '[name]_[chunkhash]';
const styleLoaderName = 'style-loader';
const cssLoaderName = 'css-loader-bbq';
const styleQuery = 'modules&localIdentName=[name]__[local]___[hash:base64:5]&importLoaders=1';

const brfsLoader = {
  test: [
    require.resolve('./src/client/Home'),
  ],
  loader: 'transform-loader?0',
  enforce: 'post',
};

const postcssLoader = {
  loader: 'postcss-loader',
  options: {
    plugins: [
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'not ie < 8',
        ],
      }),
    ],
  },
};

const clientPlugins = [
  new webpack.LoaderOptionsPlugin({
    options: {
      context: config.basedir,
      transforms: [
        file => brfs(file, { parserOpts: { allowImportExportEverywhere: true } }),
      ],
    },
  }),
];

module.exports = [{
  entry: {
    frameworks_create_entry: [require.resolve('./src/frameworks/createEntry')],
  },
  output: { library: libraryName, crossOriginLoading: 'anonymous' },
  module: {
    rules: [{
      test: /\.css$/,
      include: 'src/',
      use: [
        styleLoaderName,
        `${cssLoaderName}?${styleQuery}`,
        postcssLoader,
      ],
    }],
  },
}, {
  entry: {
    client: require.resolve('./src/client/client'),
    plain: require.resolve('./src/plain/client'),
    palette: require.resolve('./src/palette/client'),
  },
  module: {
    rules: [{
      test: /\.css$/,
      include: 'src/',
      use: [
        `${cssLoaderName}/locals?${styleQuery}&cssText`,
        postcssLoader,
      ],
    }],
  },
  output: { crossOriginLoading: 'anonymous' },
  plugins: clientPlugins,
}];