feat(cli): support custom webpack config

packages/vant-cli/src/common/constant.ts

@@ -7,14 +7,18 @@ export const SRC_DIR = join(CWD, 'src');
 export const DOCS_DIR = join(CWD, 'docs');
 export const CONFIG_FILE = join(CWD, 'components.config.js');
 export const PACKAGE_JSON_FILE = join(CWD, 'package.json');
+export const WEBPACK_CONFIG_FILE = join(CWD, 'webpack.config.js');
+
 export const DIST_DIR = join(__dirname, '../../dist');
 export const CONFIG_DIR = join(__dirname, '../config');
+
 export const PACKAGE_ENTRY_FILE = join(DIST_DIR, 'index.js');
 export const MOBILE_CONFIG_FILE = join(DIST_DIR, 'mobile-config.js');
 export const DESKTOP_CONFIG_FILE = join(DIST_DIR, 'desktop-config.js');
-export const BABEL_CONFIG_FILE = join(CONFIG_DIR, 'babel.config.js');
+
 export const JEST_CONFIG_FILE = join(CONFIG_DIR, 'jest.config.js');
+export const BABEL_CONFIG_FILE = join(CONFIG_DIR, 'babel.config.js');
+export const POSTCSS_CONFIG_FILE = join(CONFIG_DIR, 'postcss.config.js');
+export const JEST_TRANSFORM_FILE = join(CONFIG_DIR, 'jest.transform.js');
 export const JEST_FILE_MOCK_FILE = join(CONFIG_DIR, 'jest.file-mock.js');
 export const JEST_STYLE_MOCK_FILE = join(CONFIG_DIR, 'jest.style-mock.js');
-export const JEST_TRANSFORM_FILE = join(CONFIG_DIR, 'jest.transform.js');
-export const POSTCSS_CONFIG_FILE = join(CONFIG_DIR, 'postcss.config.js');

packages/vant-cli/src/common/index.ts

@@ -1,7 +1,7 @@
-import fs from 'fs-extra';
 import decamelize from 'decamelize';
+import { readdirSync, existsSync, lstatSync } from 'fs-extra';
 import { join } from 'path';
-import { SRC_DIR } from './constant';
+import { SRC_DIR, WEBPACK_CONFIG_FILE } from './constant';
 
 export const EXT_REGEXP = /\.\w+$/;
 export const SFC_REGEXP = /\.(vue)$/;
@@ -21,16 +21,16 @@ export function replaceExt(path: string, ext: string) {
 
 export function getComponents() {
   const EXCLUDES = ['.DS_Store'];
-  const dirs = fs.readdirSync(SRC_DIR);
+  const dirs = readdirSync(SRC_DIR);
   return dirs
     .filter(dir => !EXCLUDES.includes(dir))
     .filter(dir =>
-      ENTRY_EXTS.some(ext => fs.existsSync(join(SRC_DIR, dir, `index.${ext}`)))
+      ENTRY_EXTS.some(ext => existsSync(join(SRC_DIR, dir, `index.${ext}`)))
     );
 }
 
 export function isDir(dir: string) {
-  return fs.lstatSync(dir).isDirectory();
+  return lstatSync(dir).isDirectory();
 }
 
 export function isDemoDir(dir: string) {
@@ -67,4 +67,19 @@ export function pascalize(str: string): string {
   );
 }
 
+export function getWebpackConfig(): object {
+  if (existsSync(WEBPACK_CONFIG_FILE)) {
+    // eslint-disable-next-line
+    const config = require(WEBPACK_CONFIG_FILE);
+
+    if (typeof config === 'function') {
+      return config();
+    }
+
+    return config;
+  }
+
+  return {};
+}
+
 export { decamelize };

packages/vant-cli/src/config/webpack.package.ts

@@ -1,6 +1,7 @@
-import { join } from 'path';
 import merge from 'webpack-merge';
+import { join } from 'path';
 import { baseConfig } from './webpack.base';
+import { getWebpackConfig } from '../common';
 import { LIB_DIR, DIST_DIR, CONFIG_FILE } from '../common/constant';
 
 // eslint-disable-next-line
@@ -8,32 +9,36 @@ const config = require(CONFIG_FILE);
 const { name } = config;
 
 export function packageConfig(isMinify: boolean) {
-  return merge(baseConfig as any, {
+  return merge(
-    mode: 'production',
+    baseConfig as any,
-    entry: {
+    {
-      [name]: join(DIST_DIR, 'index.js')
+      mode: 'production',
-    },
+      entry: {
-    stats: 'none',
+        [name]: join(DIST_DIR, 'index.js')
-    output: {
+      },
-      path: LIB_DIR,
+      stats: 'none',
-      library: name,
+      output: {
-      libraryTarget: 'umd',
+        path: LIB_DIR,
-      filename: isMinify ? '[name].min.js' : '[name].js',
+        library: name,
-      umdNamedDefine: true,
+        libraryTarget: 'umd',
-      // https://github.com/webpack/webpack/issues/6522
+        filename: isMinify ? '[name].min.js' : '[name].js',
-      globalObject: "typeof self !== 'undefined' ? self : this"
+        umdNamedDefine: true,
-    },
+        // https://github.com/webpack/webpack/issues/6522
-    externals: {
+        globalObject: "typeof self !== 'undefined' ? self : this"
-      vue: {
+      },
-        root: 'Vue',
+      externals: {
-        commonjs: 'vue',
+        vue: {
-        commonjs2: 'vue',
+          root: 'Vue',
-        amd: 'vue'
+          commonjs: 'vue',
+          commonjs2: 'vue',
+          amd: 'vue'
+        }
+      },
+      performance: false,
+      optimization: {
+        minimize: isMinify
       }
     },
-    performance: false,
+    getWebpackConfig()
-    optimization: {
+  );
-      minimize: isMinify
-    }
-  });
 }

packages/vant-cli/src/config/webpack.site.dev.ts

@@ -3,53 +3,58 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { join } from 'path';
 import { baseConfig } from './webpack.base';
 import { CONFIG_FILE } from '../common/constant';
+import { getWebpackConfig } from '../common';
 
 // eslint-disable-next-line
 const config = require(CONFIG_FILE);
 const title = `${config.title} - ${config.description}`;
 
-export const siteDevConfig = merge(baseConfig as any, {
+export const siteDevConfig = merge(
-  entry: {
+  baseConfig as any,
-    'site-desktop': join(__dirname, '../../site/desktop/main.js'),
+  {
-    'site-mobile': join(__dirname, '../../site/mobile/main.js')
+    entry: {
-  },
+      'site-desktop': join(__dirname, '../../site/desktop/main.js'),
-  devServer: {
+      'site-mobile': join(__dirname, '../../site/mobile/main.js')
-    open: true,
+    },
-    host: '0.0.0.0',
+    devServer: {
-    stats: 'errors-only',
+      open: true,
-    disableHostCheck: true,
+      host: '0.0.0.0',
-  },
+      stats: 'errors-only',
-  output: {
+      disableHostCheck: true
-    path: join(__dirname, '../../site/dist'),
+    },
-    publicPath: '/',
+    output: {
-    chunkFilename: 'async_[name].js'
+      path: join(__dirname, '../../site/dist'),
-  },
+      publicPath: '/',
-  optimization: {
+      chunkFilename: 'async_[name].js'
-    splitChunks: {
+    },
-      cacheGroups: {
+    optimization: {
-        chunks: {
+      splitChunks: {
-          chunks: 'all',
+        cacheGroups: {
-          minChunks: 2,
+          chunks: {
-          minSize: 0,
+            chunks: 'all',
-          name: 'chunks'
+            minChunks: 2,
+            minSize: 0,
+            name: 'chunks'
+          }
         }
       }
-    }
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        title,
+        logo: config.logo,
+        chunks: ['chunks', 'site-desktop'],
+        template: join(__dirname, '../../site/desktop/index.html'),
+        filename: 'index.html'
+      }),
+      new HtmlWebpackPlugin({
+        title,
+        logo: config.logo,
+        chunks: ['chunks', 'site-mobile'],
+        template: join(__dirname, '../../site/mobile/index.html'),
+        filename: 'mobile.html'
+      })
+    ]
   },
-  plugins: [
+  getWebpackConfig()
-    new HtmlWebpackPlugin({
+);
-      title,
-      logo: config.logo,
-      chunks: ['chunks', 'site-desktop'],
-      template: join(__dirname, '../../site/desktop/index.html'),
-      filename: 'index.html'
-    }),
-    new HtmlWebpackPlugin({
-      title,
-      logo: config.logo,
-      chunks: ['chunks', 'site-mobile'],
-      template: join(__dirname, '../../site/mobile/index.html'),
-      filename: 'mobile.html'
-    })
-  ]
-});

packages/vant-cli/src/config/webpack.site.prd.ts

@@ -1,13 +1,18 @@
-import { join } from 'path';
 import merge from 'webpack-merge';
+import { join } from 'path';
 import { siteDevConfig } from './webpack.site.dev';
+import { getWebpackConfig } from '../common';
 
-export const sitePrdConfig = merge(siteDevConfig, {
+export const sitePrdConfig = merge(
-  mode: 'production',
+  siteDevConfig,
-  output: {
+  {
-    path: join(__dirname, '../../site/dist'),
+    mode: 'production',
-    publicPath: 'https://b.yzcdn.cn/vant/',
+    output: {
-    filename: '[name].[hash:8].js',
+      path: join(__dirname, '../../site/dist'),
-    chunkFilename: 'async_[name].[chunkhash:8].js'
+      publicPath: 'https://b.yzcdn.cn/vant/',
-  }
+      filename: '[name].[hash:8].js',
-});
+      chunkFilename: 'async_[name].[chunkhash:8].js'
+    }
+  },
+  getWebpackConfig()
+);