chore(@vant/cli): remove webpack related deps

packages/vant-cli/changelog.md

@@ -1,8 +1,16 @@
 # 更新日志
 
-## v4.0.0
+## v4.0.0-beta.2
 
-`unreleased`
+### 不兼容更新
+
+- 使用 vite 代替 webpack 进行构建
+- 不再支持 webpack.config.js 配置文件
+- 不再内置 babel-plugin-import 插件
+
+## v4.0.0-beta.1
+
+`2021-08-21`
 
 对以下依赖进行了大版本升级：
 

packages/vant-cli/package.json

@@ -34,10 +34,7 @@
   "devDependencies": {
     "@types/fs-extra": "^9.0.12",
     "@types/lodash": "^4.14.172",
-    "@types/postcss-load-config": "^3.0.1",
-    "@vitejs/plugin-vue": "^1.6.0",
-    "@vue/compiler-sfc": "^3.2.8",
-    "vue": "^3.2.8"
+    "@types/postcss-load-config": "^3.0.1"
   },
   "dependencies": {
     "@babel/core": "^7.15.0",
@@ -47,60 +44,48 @@
     "@docsearch/js": "3.0.0-alpha.33",
     "@types/jest": "^27.0.1",
     "@vant/eslint-config": "^3.3.2",
-    "@vant/markdown-loader": "^4.1.1",
     "@vant/markdown-vetur": "^2.2.0",
     "@vant/stylelint-config": "^1.4.2",
     "@vant/touch-emulator": "^1.3.2",
+    "@vitejs/plugin-vue": "^1.6.0",
     "@vitejs/plugin-vue-jsx": "^1.1.7",
     "@vue/babel-plugin-jsx": "^1.0.6",
     "@vue/test-utils": "2.0.0-rc.6",
     "autoprefixer": "^10.3.1",
     "babel-jest": "^27.0.6",
-    "babel-loader": "^8.2.2",
-    "babel-plugin-import": "^1.13.3",
     "chokidar": "^3.5.2",
     "clean-css": "^5.1.5",
     "commander": "^8.1.0",
     "consola": "^2.15.3",
     "conventional-changelog": "^3.1.24",
-    "css-loader": "^6.2.0",
     "eslint": "^7.32.0",
     "fast-glob": "^3.2.7",
-    "fork-ts-checker-webpack-plugin": "^6.3.2",
     "gh-pages": "^3.2.3",
     "hash-sum": "^2.0.0",
-    "html-webpack-plugin": "^5.3.2",
+    "highlight.js": "^11.2.0",
     "husky": "^7.0.1",
     "jest": "^27.0.6",
     "jest-canvas-mock": "^2.3.1",
     "jest-serializer-html": "^7.1.0",
     "less": "^4.1.1",
-    "less-loader": "^10.0.1",
     "lint-staged": "^11.1.2",
     "lodash": "^4.17.21",
+    "markdown-it-anchor": "^8.3.0",
     "ora": "^5.4.1",
-    "portfinder": "^1.0.28",
     "postcss": "^8.3.6",
     "postcss-load-config": "^3.1.0",
-    "postcss-loader": "^6.1.1",
     "prettier": "^2.3.2",
     "release-it": "^14.11.5",
     "sass": "^1.38.0",
-    "sass-loader": "^12.1.0",
-    "style-loader": "^3.2.1",
     "stylelint": "^13.13.1",
+    "transliteration": "^2.2.0",
     "ts-jest": "^27.0.5",
     "typescript": "^4.3.5",
     "vite": "^2.5.3",
     "vite-plugin-html": "^2.1.0",
     "vite-plugin-md": "^0.11.0",
-    "vue-loader": "^16.5.0",
     "vue-router": "^4.0.0",
-    "vue3-jest": "^27.0.0-alpha.2",
-    "webpack": "^5.51.1",
-    "webpack-dev-server": "^4.0.0",
-    "webpack-merge": "^5.8.0",
-    "webpackbar": "^5.0.0-3"
+    "vue3-jest": "^27.0.0-alpha.2"
   },
   "release-it": {
     "git": {

packages/vant-cli/src/bin.ts

@@ -18,7 +18,7 @@ const program = new Command();
 
 program.version(`@vant/cli ${cliVersion}`);
 
-program.command('dev').description('Run webpack dev server').action(dev);
+program.command('dev').description('Run dev server').action(dev);
 
 program.command('lint').description('Run eslint and stylelint').action(lint);
 

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

@@ -28,7 +28,6 @@ export const VETUR_DIR = join(ROOT, 'vetur');
 export const SITE_DIST_DIR = join(ROOT, 'site');
 export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js');
 export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');
-export const ROOT_WEBPACK_CONFIG_FILE = join(ROOT, 'webpack.config.js');
 export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js');
 export const CACHE_DIR = join(ROOT, 'node_modules/.cache');
 

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

@@ -6,9 +6,7 @@ import {
   readFileSync,
   outputFileSync,
 } from 'fs-extra';
-import { merge } from 'webpack-merge';
-import { SRC_DIR, getVantConfig, ROOT_WEBPACK_CONFIG_FILE } from './constant';
-import { WebpackConfig } from './types';
+import { SRC_DIR, getVantConfig } from './constant';
 
 export const EXT_REGEXP = /\.\w+$/;
 export const SFC_REGEXP = /\.(vue)$/;
@@ -102,22 +100,6 @@ export function normalizePath(path: string): string {
   return path.replace(/\\/g, '/');
 }
 
-export function getWebpackConfig(defaultConfig: WebpackConfig): WebpackConfig {
-  if (existsSync(ROOT_WEBPACK_CONFIG_FILE)) {
-    const config = require(ROOT_WEBPACK_CONFIG_FILE);
-
-    // 如果是函数形式，可能并不仅仅是添加额外的处理流程，而是在原有流程上进行修改
-    // 比如修改markdown-loader,添加options.enableMetaData
-    if (typeof config === 'function') {
-      return merge(defaultConfig, config(defaultConfig));
-    }
-
-    return merge(defaultConfig, config);
-  }
-
-  return defaultConfig;
-}
-
 export type ModuleEnv = 'esmodule' | 'commonjs';
 export type NodeEnv = 'production' | 'development' | 'test';
 export type BuildTarget = 'site' | 'package';

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

@@ -1,5 +0,0 @@
-import type Webpack from 'webpack';
-
-export type WebpackConfig = Webpack.Configuration & {
-  devServer?: any;
-};

packages/vant-cli/src/config/babel.config.ts

@@ -27,15 +27,6 @@ module.exports = function (api?: ConfigAPI, options: PresetOption = {}) {
       require('../compiler/babel-preset-vue-ts'),
     ],
     plugins: [
-      [
-        require.resolve('babel-plugin-import'),
-        {
-          libraryName: 'vant',
-          libraryDirectory: useESModules ? 'es' : 'lib',
-          style: true,
-        },
-        'vant',
-      ],
       [
         require.resolve('@vue/babel-plugin-jsx'),
         {

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

@@ -1,124 +0,0 @@
-import sass from 'sass';
-import webpack from 'webpack';
-import { VueLoaderPlugin } from 'vue-loader';
-import { join } from 'path';
-import { consola } from '../common/logger';
-import { existsSync } from 'fs';
-import { WebpackConfig } from '../common/types';
-import {
-  CWD,
-  STYLE_EXTS,
-  SCRIPT_EXTS,
-  POSTCSS_CONFIG_FILE,
-} from '../common/constant';
-
-const CSS_LOADERS = [
-  require.resolve('style-loader'),
-  require.resolve('css-loader'),
-  {
-    loader: require.resolve('postcss-loader'),
-    options: {
-      postcssOptions: require(POSTCSS_CONFIG_FILE),
-    },
-  },
-];
-
-const VUE_LOADER = {
-  loader: require.resolve('vue-loader'),
-  options: {
-    compilerOptions: {
-      preserveWhitespace: false,
-    },
-  },
-};
-
-const plugins = [
-  new webpack.DefinePlugin({
-    __VUE_OPTIONS_API__: 'true',
-    __VUE_PROD_DEVTOOLS__: 'false',
-  }),
-  new VueLoaderPlugin(),
-];
-
-const tsconfigPath = join(CWD, 'tsconfig.json');
-if (existsSync(tsconfigPath)) {
-  const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');
-  plugins.push(
-    new ForkTsCheckerPlugin({
-      typescript: {
-        extensions: {
-          vue: {
-            enabled: true,
-            compiler: '@vue/compiler-sfc',
-          },
-        },
-      },
-      logger: {
-        issues: {
-          // skip info message
-          log() {},
-          warn(message: string) {
-            consola.warn(message);
-          },
-          error(message: string) {
-            consola.error(message);
-          },
-        },
-      },
-    })
-  );
-}
-
-export const baseConfig: WebpackConfig = {
-  mode: 'development',
-  resolve: {
-    extensions: [...SCRIPT_EXTS, ...STYLE_EXTS],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        use: [VUE_LOADER],
-      },
-      {
-        test: /\.(js|ts|jsx|tsx)$/,
-        exclude: /node_modules\/(?!(@vant\/cli))/,
-        use: [require.resolve('babel-loader')],
-      },
-      {
-        test: /\.css$/,
-        sideEffects: true,
-        use: CSS_LOADERS,
-      },
-      {
-        test: /\.less$/,
-        sideEffects: true,
-        use: [...CSS_LOADERS, require.resolve('less-loader')],
-      },
-      {
-        test: /\.scss$/,
-        sideEffects: true,
-        use: [
-          ...CSS_LOADERS,
-          {
-            loader: require.resolve('sass-loader'),
-            options: {
-              implementation: sass,
-            },
-          },
-        ],
-      },
-      {
-        test: /\.md$/,
-        use: [VUE_LOADER, require.resolve('@vant/markdown-loader')],
-      },
-    ],
-  },
-  plugins,
-  cache: {
-    type: 'filesystem',
-    buildDependencies: {
-      config: [__filename],
-    },
-  },
-};

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

@@ -1,109 +0,0 @@
-import WebpackBar from 'webpackbar';
-import HtmlWebpackPlugin from 'html-webpack-plugin';
-import { get } from 'lodash';
-import { join } from 'path';
-import { merge } from 'webpack-merge';
-import { baseConfig } from './webpack.base';
-import { WebpackConfig } from '../common/types';
-import { getVantConfig, getWebpackConfig } from '../common';
-import {
-  GREEN,
-  SITE_MOBILE_SHARED_FILE,
-  SITE_DESKTOP_SHARED_FILE,
-} from '../common/constant';
-
-export function getSiteDevBaseConfig(): WebpackConfig {
-  const vantConfig = getVantConfig();
-  const baiduAnalytics = get(vantConfig, 'site.baiduAnalytics');
-
-  function getSiteConfig() {
-    const siteConfig = vantConfig.site;
-
-    if (siteConfig.locales) {
-      return siteConfig.locales[siteConfig.defaultLang || 'en-US'];
-    }
-
-    return siteConfig;
-  }
-
-  function getTitle(config: { title: string; description?: string }) {
-    let { title } = config;
-
-    if (config.description) {
-      title += ` - ${config.description}`;
-    }
-
-    return title;
-  }
-
-  const siteConfig = getSiteConfig();
-  const title = getTitle(siteConfig);
-  const { htmlPluginOptions } = vantConfig.site;
-
-  return merge(baseConfig as any, {
-    entry: {
-      'site-desktop': [join(__dirname, '../../site/desktop/main.js')],
-      'site-mobile': [join(__dirname, '../../site/mobile/main.js')],
-    },
-    devServer: {
-      port: 8080,
-      host: '0.0.0.0',
-      allowedHosts: 'all',
-      devMiddleware: {
-        stats: 'errors-only',
-        publicPath: '/',
-      },
-    },
-    resolve: {
-      alias: {
-        'site-mobile-shared': SITE_MOBILE_SHARED_FILE,
-        'site-desktop-shared': SITE_DESKTOP_SHARED_FILE,
-      },
-    },
-    output: {
-      chunkFilename: '[name].js',
-    },
-    optimization: {
-      splitChunks: {
-        cacheGroups: {
-          chunks: {
-            chunks: 'all',
-            minChunks: 2,
-            minSize: 0,
-            name: 'chunks',
-          },
-        },
-      },
-    },
-    plugins: [
-      new WebpackBar({
-        name: 'Vant Cli',
-        color: GREEN,
-      }),
-      new HtmlWebpackPlugin({
-        title,
-        logo: siteConfig.logo,
-        description: siteConfig.description,
-        chunks: ['chunks', 'site-desktop'],
-        template: join(__dirname, '../../site/desktop/index.html'),
-        filename: 'index.html',
-        baiduAnalytics,
-        ...htmlPluginOptions,
-      }),
-      new HtmlWebpackPlugin({
-        title,
-        logo: siteConfig.logo,
-        description: siteConfig.description,
-        chunks: ['chunks', 'site-mobile'],
-        template: join(__dirname, '../../site/mobile/index.html'),
-        filename: 'mobile.html',
-        baiduAnalytics,
-        ...htmlPluginOptions,
-      }),
-    ],
-  });
-}
-
-export function getSiteDevConfig(): WebpackConfig {
-  return getWebpackConfig(getSiteDevBaseConfig());
-}

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

@@ -1,29 +0,0 @@
-import { merge } from 'webpack-merge';
-import { get } from 'lodash';
-import { WebpackConfig } from '../common/types';
-import { getVantConfig, getWebpackConfig } from '../common';
-import { getSiteDevBaseConfig } from './webpack.site.dev';
-import { SITE_DIST_DIR } from '../common/constant';
-
-const vantConfig = getVantConfig();
-const outputDir = get(vantConfig, 'build.site.outputDir', SITE_DIST_DIR);
-const publicPath = get(vantConfig, 'build.site.publicPath', '/');
-
-export function getSitePrdConfig(): WebpackConfig {
-  return getWebpackConfig(
-    merge(getSiteDevBaseConfig(), {
-      mode: 'production',
-      stats: 'none',
-      performance: {
-        maxAssetSize: 5 * 1024 * 1024,
-        maxEntrypointSize: 5 * 1024 * 1024,
-      },
-      output: {
-        publicPath,
-        path: outputDir,
-        filename: '[name].[contenthash:8].js',
-        chunkFilename: 'async_[name].[contenthash:8].js',
-      },
-    })
-  );
-}

packages/vant-cli/src/module.d.ts

@@ -4,10 +4,7 @@ declare module 'sass';
 declare module 'execa';
 declare module 'hash-sum';
 declare module 'clean-css';
-declare module 'webpackbar';
 declare module 'release-it';
-declare module 'webpack-dev-server';
-declare module 'html-webpack-plugin';
 declare module 'conventional-changelog';
 declare module '@vant/markdown-vetur';
 declare module '@babel/helper-plugin-utils';