feat: 支持覆盖 client端 js 与 ts loader

imsunhao · Oct 22, 2019 · 275e826 · 275e826
1 parent 84fb110
commit 275e826
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 37 deletions.
diff --git a/src/config/webpack.base.config.ts b/src/config/webpack.base.config.ts
@@ -67,16 +67,6 @@ export function getCommonBaseConfig(options: ConfigOptions.options) {
               preserveWhitespace: false
             }
           }
-        },
-        {
-          test: /\.js$/,
-          loader: 'happypack/loader?id=babel',
-          exclude: /node_modules/
-        },
-        {
-          test: /\.tsx?$/,
-          loader: 'happypack/loader?id=ts',
-          exclude: /node_modules/
         }
       ]
     },

diff --git a/src/config/webpack.client.config.ts b/src/config/webpack.client.config.ts
@@ -12,25 +12,49 @@ function baseGetClientConfig(options: ConfigOptions.options) {
   const { externals, alias } = getExternals(options, 'client')
   const mode = options.webpack.mode || 'production'
   const isProd = mode === 'production'
+  const client = options.webpack ? options.webpack.client || {} : {}
+  const rules = []
+  if (client.module && client.module.rules) {
+    const babelJS = client.module.rules.find(rule => rule.test === /\.js$/)
+    if (!babelJS) {
+      rules.push({
+        test: /\.js$/,
+        loader: 'happypack/loader?id=babel',
+        exclude: /node_modules/
+      })
+    }
+    const babelTS = client.module.rules.find(rule => rule.test === /\.tsx?$/)
+    if (!babelTS) {
+      rules.push({
+        test: /\.tsx?$/,
+        use: [
+          'happypack/loader?id=babel',
+          'happypack/loader?id=ts'
+        ],
+        exclude: /node_modules/
+      })
+    }
+  }
   return (merge as any)(
     getBaseConfig(options),
     {
       name: 'client',
       entry: {
         app: './src/entry-client.js'
       },
+      module: {
+        rules
+      },
       resolve: {
-        alias,
+        alias
       },
       externals,
       output: {
         globalObject: 'this'
       },
       optimization: {
         runtimeChunk: !isProd,
-        minimizer: [
-          new OptimizeCSSAssetsPlugin()
-        ],
+        minimizer: [new OptimizeCSSAssetsPlugin()],
         splitChunks: {
           cacheGroups: {
             styles: {
@@ -49,28 +73,18 @@ function baseGetClientConfig(options: ConfigOptions.options) {
         })
       ]
     },
-    getStyle(options, { isServer: false }),
+    getStyle(options, { isServer: false })
   )
 }
 
 export async function getClientConfig(options: ConfigOptions.options) {
   const client = options.webpack ? options.webpack.client || {} : {}
 
-  return (merge as any)(
-    baseGetClientConfig(options),
-    await getClientDllPlugin(options),
-    client,
-  )
+  return (merge as any)(baseGetClientConfig(options), await getClientDllPlugin(options), client)
 }
 
-
 export function getClientConfigSync(options: ConfigOptions.options) {
   const client = options.webpack ? options.webpack.client || {} : {}
 
-  return (merge as any)(
-    baseGetClientConfig(options),
-    getClientDllPluginSync(options),
-    client,
-  )
-
-}
+  return (merge as any)(baseGetClientConfig(options), getClientDllPluginSync(options), client)
+}
diff --git a/src/config/webpack.server.config.ts b/src/config/webpack.server.config.ts
@@ -11,34 +11,48 @@ import { getExternals } from 'src/utils/plugins.webpack'
 
 export function getServerConfig(options: ConfigOptions.options) {
   if (!(options.webpack && options.webpack.mode)) {
-    consola.fatal(
-      'getBaseConfig options.babelrc or options.webpack is undefined'
-    )
+    consola.fatal('getBaseConfig options.babelrc or options.webpack is undefined')
     return process.exit(1)
   }
   if (options.webpack.server) {
     const server = options.webpack.server.webpack || options.webpack.server || {}
     const mode = options.webpack.mode || 'production'
     const isProd = mode === 'production'
     const { externals, alias } = getExternals(options, 'server')
-    const whitelist = [/\.css$/, /\?vue&type=style/].concat(options.webpack.server.nodeExternalsWhitelist || []).concat(externals as any)
+    const whitelist = [/\.css$/, /\?vue&type=style/]
+      .concat(options.webpack.server.nodeExternalsWhitelist || [])
+      .concat(externals as any)
     return (merge as any)(
       getBaseConfig(options),
       {
         name: 'server',
         target: 'node',
         entry: './src/entry-server.js',
+        module: {
+          rules: [
+            {
+              test: /\.js$/,
+              loader: 'happypack/loader?id=babel',
+              exclude: /node_modules/
+            },
+            {
+              test: /\.tsx?$/,
+              loader: 'happypack/loader?id=ts',
+              exclude: /node_modules/
+            }
+          ]
+        },
         output: {
           libraryTarget: 'commonjs2'
         },
         resolve: {
-          alias,
+          alias
         },
         externals: [
           nodeExternals({
             // whitelist: /\.css$/
             whitelist
-          }),
+          })
         ],
         performance: {
           maxEntrypointSize: 1024 * 1024 * 6,
@@ -56,9 +70,7 @@ export function getServerConfig(options: ConfigOptions.options) {
       server
     )
   } else {
-    consola.fatal(
-      '[getServerConfig] options.webpack.server is undefined'
-    )
+    consola.fatal('[getServerConfig] options.webpack.server is undefined')
     return process.exit(1)
   }
 }