update:css theme extract

Author: hiyangguo

src/index.js

@@ -3,6 +3,9 @@ import ReactDOM from 'react-dom';
 
 // style
 import './less/index.less';
+import './less/themes/green.less';
+import './less/themes/red.less';
+import './less/themes/yellow.less';
 
 import App from './App';
 

src/less/index.less

@@ -0,0 +1,5 @@
+@base-color: #03a9f4;
+
+body {
+  background-color: @base-color;
+}

src/less/themes/green.less

@@ -0,0 +1,3 @@
+@import "../index";
+
+@base-color: #4caf50;

src/less/themes/red.less

@@ -0,0 +1,3 @@
+@import "../index";
+
+@base-color: #F44336;

src/less/themes/yellow.less

@@ -0,0 +1,3 @@
+@import "../index";
+
+@base-color: #ffeb3b;

webpack.config.js

@@ -1,12 +1,36 @@
 const path = require('path');
+const fs = require('fs');
 const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlwebpackPlugin = require('html-webpack-plugin');
 
 const { STYLE_DEBUG } = process.env;
+// 主题路径
+const THEME_PATH = './src/less/themes';
 
 const extractLess = new ExtractTextPlugin('style.[hash].css');
 
+const styleLoaders = [{ loader: 'css-loader' }, { loader: 'less-loader' }];
+
+const resolveToThemeStaticPath = fileName => path.resolve(THEME_PATH, fileName);
+const themeFileNameSet = fs.readdirSync(path.resolve(THEME_PATH));
+const themePaths = themeFileNameSet.map(resolveToThemeStaticPath);
+const getThemeName = fileName => `theme-${path.basename(fileName, path.extname(fileName))}`;
+
+// 全部 ExtractLessS 的集合
+const themesExtractLessSet = themeFileNameSet.map(fileName => new ExtractTextPlugin(`${getThemeName(fileName)}.css`))
+// 主题 Loader 的集合
+const themeLoaderSet = themeFileNameSet.map((fileName, index) => {
+  return {
+    test: /\.(less|css)$/,
+    include: resolveToThemeStaticPath(fileName),
+    loader: themesExtractLessSet[index].extract({
+      use: styleLoaders
+    })
+  }
+});
+
+
 module.exports = {
   devServer: {
     contentBase: path.join(__dirname, 'public'),
@@ -36,14 +60,9 @@ module.exports = {
       },
       {
         test: /\.(less|css)$/,
+        exclude: themePaths,
         loader: extractLess.extract({
-          use: [
-            {
-              loader: 'css-loader',
-            }, {
-              loader: 'less-loader'
-            }
-          ],
+          use: styleLoaders,
           // use style-loader in development
           fallback: 'style-loader?{attrs:{prop: "value"}}'
         })
@@ -55,11 +74,15 @@ module.exports = {
             loader: 'html-loader'
           }
         ]
-      }
+      },
+      // 将Loader 的集合，加入 rules
+      ...themeLoaderSet
     ]
   },
   plugins: [
     extractLess,
+    // 将所有的 themesExtractLess 加入 plugin
+    ...themesExtractLessSet,
     new webpack.NamedModulesPlugin(),
     new HtmlwebpackPlugin({
       title: 'webpack 多主题打包演示',