feat: support module.rules config

Author: hubcarl

lib/core/config.js

@@ -74,10 +74,7 @@ class Config {
     if (this._typescript) {
       return this._typescript;
     }
-    const typescript = this.getLoaderByName('ts');
-    if (this.utils.isObject(typescript) && this.utils.isTrue(typescript.enable)) {
-      this._typescript = typescript;
-    }
+    this._typescript = this.isUseLoader('ts');
     return this._typescript;
   }
 
@@ -340,12 +337,31 @@ class Config {
     return this.utils.isTrue(enable);
   }
 
+  isUseLoader(name) {
+    const configInfo = this.getMergeLoaderByName(name)[name];
+    return this.isUseConfig(configInfo);
+  }
+
+  isUsePlugin(name) {
+    const configInfo = this.getPluginByName(name);
+    return this.isUseConfig(configInfo);
+  }
+
+  isUseConfig(configInfo) {
+    return configInfo && this.isType(configInfo.type) && this.isEnv(configInfo.env) && this.isEnable(configInfo.enable);
+  }
+
   isUse(name, range = 'plugin') {
     if (this.utils.isBoolean(name)) {
       return name;
     }
-    const configInfo = this.utils.isObject(name) ? name : (range === 'plugin' ? this.getPluginByName(name) : this.getLoaderByName(name));
-    return configInfo && this.isType(configInfo.type) && this.isEnv(configInfo.env) && this.isEnable(configInfo.enable);
+    if (this.utils.isObject(name)) {
+      return this.isUseConfig(name);
+    }
+    if (range === 'plugin') {
+      return this.isUsePlugin(name);
+    }
+    return this.isUseLoader(name);
   }
 
   isWebpackLoader(loader) {

lib/core/loader.js

@@ -6,6 +6,10 @@ const { STYLE_LOADER } = require('../core/constant');
 
 module.exports = {
 
+  getLoaderLabel(loader) {
+    return this.utils.getLoaderLabel(loader, this);
+  },
+
   getConfigLoader(config) {
     const { loaders = {} } = config;
     const { rules = [] } = config.module || {};
@@ -26,18 +30,29 @@ module.exports = {
     }
 
     return rules.find(loader => {
-      const label = this.utils.getLoaderLabel(loader);
+      const label = this.getLoaderLabel(loader);
       if (name === label || mappingName === label) {
         return true;
       }
       return false;
     });
   },
 
-  getLoaderByName(name) {
+  getMergeLoaderByName(name) {
     const defaultLoader = this.utils.cloneDeep(this.loaders[name]);
     const configLoader = this.getConfigLoaderByName(name);
-    return this.mergeLoader({ [name]: configLoader }, { [name]: defaultLoader })[name];
+    return this.mergeLoader({ [name]: configLoader }, { [name]: defaultLoader });
+  },
+
+  getLoaderByName(name) {
+    const loader = this.getMergeLoaderByName(name);
+    const options = this.merge(this.config.loaderOptions, this.loaders.options);
+    const loaders = this.mergeLoaderOption(loader, options);
+    const webpackLoaders = this.createLoader(loaders);
+    if (webpackLoaders.length) {
+      return webpackLoaders[0];
+    }
+    return {};
   },
 
   initLoader() {
@@ -143,6 +158,17 @@ module.exports = {
     return null;
   },
 
+  getTsLoader() {
+    const itemLoader = this.getLoaderByName('ts');
+    if (itemLoader && itemLoader.use) {
+      const tsLoader = itemLoader.use.find(loader => {
+        return this.utils.isObject(loader) && loader.loader === 'ts-loader';
+      });
+      return tsLoader;
+    }
+    return null;
+  },
+
   addLoader(loader) {
     if (loader.test && (loader.use || loader.loader)) {
       const loaderInfo = {};
@@ -167,7 +193,7 @@ module.exports = {
     const sourceLoaders = Array.isArray(cloneLoaders) ? {} : cloneLoaders;
     if (Array.isArray(cloneLoaders)) {
       cloneLoaders.forEach(loader => {
-        const label = this.utils.getLoaderLabel(loader);
+        const label = this.getLoaderLabel(loader);
         if (this.isWebpackLoader(loader)) {
           sourceLoaders[label] = this.merge(loader, { enable: true });
         } else {
@@ -213,7 +239,7 @@ module.exports = {
       }
       if (Array.isArray(itemLoader.use)) {
         itemLoader.use.forEach((loader, index) => {
-          const label = this.utils.getLoaderLabel(loader);
+          const label = this.getLoaderLabel(loader);
           const mLabel = this.loaderKeyLabelMapping[name];
           const configOptions = itemLoader.options && (label === mLabel || label === name) ? itemLoader.options : {};
           const options = this.merge(loaderOptions[label], { options: configOptions });
@@ -275,7 +301,7 @@ module.exports = {
     });
     loaderNames.forEach(name => {
       const itemLoader = loaders[name];
-      ['type', 'enable', 'postcss', 'framework', 'loader', 'options'].forEach(propery => {
+      ['type', 'enable', 'postcss', 'framework', 'loader', 'options', 'name'].forEach(propery => {
         delete itemLoader[propery];
       });
     });
@@ -320,13 +346,8 @@ module.exports = {
     // https://github.com/TypeStrong/ts-loader/pull/782
     // vue-loader 14 版本中，需在 options 重复配置 ts-loader，升级 15 以后可移除
     if (this.typescript) {
-      const use = this.utils.isFunction(this.typescript.use) ? this.typescript.use.apply(this) : this.typescript.use;
-      const tsLoader = use.find(item => {
-        return item.loader === 'ts-loader';
-      });
-      if (tsLoader) {
-        loaders.ts = tsLoader;
-      }
+      const tsLoader = this.getTsLoader();
+      loaders.ts = tsLoader;
     }
     return { preLoaders, loaders };
   },

test/vue.test.js

@@ -75,5 +75,136 @@ describe('vue.test.js', () => {
       const webpackConfig = builder.create();
       expect(webpackConfig.output.path).to.equal(path.join(__dirname, '../app/view'));
     });
+
+    it('should vue ts framework loaders test', () => {
+      const builder = new WebpackServerBuilder({
+        loaders: {
+          ts: true,
+          vue: {
+            test: /\.vue$/,
+            exclude: /node_modules/,
+            use() {
+              const options = this.createFrameworkLoader('vue-style-loader');
+              options.transformToRequire = { img: ['url', 'src'] };
+              return [
+                {
+                  loader: 'vue-loader',
+                  options
+                }
+              ];
+            }
+          }
+        }
+      });
+      const webpackConfig = builder.create();
+      const vueLoader = helper.getLoaderByName('vue', webpackConfig.module.rules);
+      expect(vueLoader.use[0].options.loaders).to.include.keys(['ts', 'js', 'css']);
+    });
+    it('should vue typescript loaders framework test', () => {
+      const builder = new WebpackServerBuilder({
+        loaders: {
+          typescript: true,
+          vue: {
+            test: /\.vue$/,
+            exclude: /node_modules/,
+            use() {
+              const options = this.createFrameworkLoader('vue-style-loader');
+              options.transformToRequire = { img: ['url', 'src'] };
+              return [
+                {
+                  loader: 'vue-loader',
+                  options
+                }
+              ];
+            }
+          }
+        }
+      });
+      const webpackConfig = builder.create();
+      const vueLoader = helper.getLoaderByName('vue', webpackConfig.module.rules);
+      expect(vueLoader.use[0].options.loaders).to.include.keys(['ts', 'js', 'css']);
+    });
+    it('should vue typescript module rules test', () => {
+      const builder = new WebpackServerBuilder({
+        module: {
+          rules: [
+            { typescript: true },
+            {
+              vue: {
+                test: /\.vue$/,
+                exclude: /node_modules/,
+                use() {
+                  const options = this.createFrameworkLoader('vue-style-loader');
+                  options.transformToRequire = { img: ['url', 'src'] };
+                  return [
+                    {
+                      loader: 'vue-loader',
+                      options
+                    }
+                  ];
+                }
+              }
+            }
+          ]
+        }
+      });
+      const webpackConfig = builder.create();
+      const vueLoader = helper.getLoaderByName('vue', webpackConfig.module.rules);
+      expect(vueLoader.use[0].options.loaders).to.include.keys(['ts', 'js', 'css']);
+    });
+    it('should vue ts module rules test', () => {
+      const builder = new WebpackServerBuilder({
+        module: {
+          rules: [
+            { ts: true },
+            {
+              vue: {
+                test: /\.vue$/,
+                exclude: /node_modules/,
+                use() {
+                  const options = this.createFrameworkLoader('vue-style-loader');
+                  options.transformToRequire = { img: ['url', 'src'] };
+                  return [
+                    {
+                      loader: 'vue-loader',
+                      options
+                    }
+                  ];
+                }
+              }
+            }
+          ]
+        }
+      });
+      const webpackConfig = builder.create();
+      const vueLoader = helper.getLoaderByName('vue', webpackConfig.module.rules);
+      expect(vueLoader.use[0].options.loaders).to.include.keys(['ts', 'js', 'css']);
+    });
+    it('should vue ts module rules native config test', () => {
+      const builder = new WebpackServerBuilder({
+        module: {
+          rules: [
+            { ts: true },
+            {
+              test: /\.vue$/,
+              exclude: /node_modules/,
+              use() {
+                const options = this.createFrameworkLoader('vue-style-loader');
+                options.transformToRequire = { img: ['url', 'src'] };
+                return [
+                  {
+                    loader: 'vue-loader',
+                    options
+                  }
+                ];
+              }
+            }
+          ]
+        }
+      });
+      const webpackConfig = builder.create();
+      const vueLoader = helper.getLoaderByName('vue', webpackConfig.module.rules);
+      expect(vueLoader.use[0].options.loaders).to.include.keys(['ts', 'js', 'css']);
+    });
   });
 });

utils/utils.js

@@ -271,20 +271,23 @@ utils.getLoaderOptionString = (name, options) => {
   return optionStr;
 };
 
-utils.getLoaderLabel = loader => {
+utils.getLoaderLabel = (loader, ctx) => {
   let loaderName = loader;
   if (utils.isObject(loader)) {
-    if (loader.loader) {
+    if (loader.name) {
+      loaderName = loader.name;
+    } else if (loader.loader) {
       loaderName = loader.loader;
-    } else if (Array.isArray(loader.use)) {
-      loaderName = loader.use.reduce((name, item) => {
+    } else if (Array.isArray(loader.use) || utils.isFunction(loader.use)) {
+      const loaders = utils.isFunction(loader.use) ? loader.use.apply(ctx) : loader.use;
+      loaderName = loaders.reduce((names, item) => {
         if (utils.isString(item)) {
-          name += item;
-        } else {
-          name += item.loader;
+          names.push(item.replace(/-loader$/, ''));
+        } else if (item.loader) {
+          names.push(item.loader.replace(/-loader$/, ''));
         }
-        return name;
-      }, '');
+        return names;
+      }, []).join('-');
     } else if (Object.keys(loader).length === 1) {
       loaderName = Object.keys(loader)[0];
     }