fix: https://github.com/TypeStrong/ts-loader/pull/7820

Author: hubcarl

lib/builder.js

@@ -97,6 +97,7 @@ exports.getDllWebpackConfig = (config, option = {}) => {
     const cdn = config.cdn;
     const compile = config.compile || {};
     const host = config.host;
+    const module = config.module;
     const configLoaders = config.loaders || {};
     const configPlugins = config.plugins || {};
     const optimization = config.optimization;
@@ -130,6 +131,7 @@ exports.getDllWebpackConfig = (config, option = {}) => {
         resolveLoader,
         install,
         cdn,
+        module,
         loaders,
         plugins,
         optimization

lib/core/config.js

@@ -66,17 +66,14 @@ class Config {
   }
 
   get typescript() {
-    const configLoaders = this.config.loaders;
-    if (this.utils.isObject(configLoaders)) {
-      if (configLoaders.typescript) {
-        return true;
-      }
-    } else if (Array.isArray(configLoaders)) {
-      return configLoaders.some(loader => {
-        return !!loader.typescript;
-      });
+    if (this._typescript) {
+      return this._typescript;
+    }
+    const typescript = this.getLoaderByName('typescript');
+    if (this.utils.isObject(typescript) && this.utils.isTrue(typescript.enable)) {
+      this._typescript = typescript;
     }
-    return false;
+    return this._typescript;
   }
 
   get postcss() {

lib/core/constant.js

@@ -0,0 +1,4 @@
+'use strict';
+module.exports = {
+  STYLE_LOADER: 'style-loader'
+};

lib/core/loader.js

@@ -2,6 +2,7 @@
 const path = require('path');
 const fs = require('fs');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const { STYLE_LOADER } = require('../core/constant');
 
 module.exports = {
 
@@ -16,9 +17,10 @@ module.exports = {
     if (loaders[name]) {
       return loaders[name];
     }
+    const mappingName = this.loaderKeyLabelMapping[name];
     return rules.find(loader => {
       const label = this.utils.getLoaderLabel(loader);
-      if (name === label) {
+      if (name === label || mappingName === label) {
         return true;
       }
       return false;
@@ -44,7 +46,7 @@ module.exports = {
   },
 
   createBabelLoader(babel = {}) {
-    babel = this.merge({ loader: 'babel-loader', options: {}}, babel);
+    babel = this.merge({ loader: 'babel-loader', options: {} }, babel);
     const babelEnv = process.env.BABEL_ENV;
     if (babelEnv) {
       if (this.isBabel7) { // @babel/core use envName key
@@ -229,6 +231,55 @@ module.exports = {
     return webpackLoaders;
   },
 
+
+  createFrameworkLoader(styleLoader = 'style-loader', options) {
+    const preLoaders = {};
+    const loaders = { js: this.createBabelLoader() }; // fix vue entry babel compile
+    const extract = this.isUse('extract');
+    Object.keys(this.loaders).forEach(name => {
+      const itemLoader = this.loaders[name];
+      if (itemLoader.framework && (itemLoader.enable || itemLoader.enable === undefined)) {
+        const useLoaders = this.utils.cloneDeep(itemLoader).use;
+        if (name !== 'css') {
+          const preLoader = useLoaders[useLoaders.length - 1]; // get last loader
+          if (this.utils.isString(preLoader)) {
+            preLoaders[name] = preLoader;
+          } else if (this.utils.isObject(preLoader) && preLoader.options) {
+            preLoaders[name] = `${preLoader.loader}?${JSON.stringify(preLoader.options)}`;
+          } else {
+            preLoaders[name] = preLoader.loader;
+          }
+        }
+        if (extract) {
+          useLoaders.forEach(item => {
+            if (item.loader === STYLE_LOADER) {
+              item.loader = styleLoader;
+            }
+          });
+          loaders[name] = useLoaders;
+        } else {
+          const filterLoaders = useLoaders.filter(item => {
+            return item.loader !== STYLE_LOADER && item.loader !== styleLoader;
+          });
+          filterLoaders.unshift({ loader: styleLoader, options });
+          loaders[name] = filterLoaders;
+        }
+      }
+    });
+    // https://github.com/TypeStrong/ts-loader/pull/782
+    // vue-loader 14 版本中，需在 options 重复配置 ts-loader，升级 15 以后可移除
+    if (this.typescript && !loaders.ts) {
+      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;
+      }
+    }
+    return { preLoaders, loaders };
+  },
+
   installLoader(loaders) {
     const dependencies = this.dependencies;
     const webpackLoaders = this.createLoader(loaders);

lib/target/base.js

@@ -1,10 +1,10 @@
 'use strict';
-const STYLE_LOADER = 'style-loader';
 const path = require('path');
 const fs = require('fs');
 const assert = require('assert');
 const AssetFileWebpackPlugin = require('webpack-asset-file-plugin');
 const Config = require('../core/config');
+const { STYLE_LOADER } = require('../core/constant');
 class WebpackBaseBuilder extends Config {
   constructor(config = {}) {
     super(config);
@@ -44,43 +44,6 @@ class WebpackBaseBuilder extends Config {
     return this.webpackOptimize.getCommonsChunk();
   }
 
-  createFrameworkLoader(styleLoader = 'style-loader', options) {
-    const preLoaders = {};
-    const loaders = { js: this.createBabelLoader() }; // fix vue entry babel compile
-    const extract = this.isUse('extract');
-    Object.keys(this.loaders).forEach(name => {
-      const itemLoader = this.loaders[name];
-      if (itemLoader.framework && (itemLoader.enable || itemLoader.enable === undefined)) {
-        const useLoaders = this.utils.cloneDeep(itemLoader).use;
-        if (name !== 'css') {
-          const preLoader = useLoaders[useLoaders.length - 1]; // get last loader
-          if (this.utils.isString(preLoader)) {
-            preLoaders[name] = preLoader;
-          } else if (this.utils.isObject(preLoader) && preLoader.options) {
-            preLoaders[name] = `${preLoader.loader}?${JSON.stringify(preLoader.options)}`;
-          } else {
-            preLoaders[name] = preLoader.loader;
-          }
-        }
-        if (extract) {
-          useLoaders.forEach(item => {
-            if (item.loader === STYLE_LOADER) {
-              item.loader = styleLoader;
-            }
-          });
-          loaders[name] = useLoaders;
-        } else {
-          const filterLoaders = useLoaders.filter(item => {
-            return item.loader !== STYLE_LOADER && item.loader !== styleLoader;
-          });
-          filterLoaders.unshift({ loader: styleLoader, options });
-          loaders[name] = filterLoaders;
-        }
-      }
-    });
-    return { preLoaders, loaders };
-  }
-
   prepareEntry(entries, entryLoader = {}) {
     if (this.entryLoader) {
       const mergeLoader = this.merge(entryLoader, this.entryLoader);

test/client.test.js

@@ -56,7 +56,7 @@ describe('client.test.js', () => {
           use: ['vue-html-loader']
         }
       };
-      const builder = createBuilder({});
+      const builder = createBuilder({ loaders: { typescript: true }});
       builder.mergeLoader(vueLoaderConfig);
       const webpackConfig = builder.create();
       const rules = webpackConfig.module.rules;