feat(webpack): support webpack

.eslintrc.js

@@ -3,7 +3,9 @@ module.exports = {
     es2021: true,
     node: true
   },
-  extends: 'standard',
+  extends: [
+    'standard'
+  ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaVersion: 12,
@@ -13,5 +15,6 @@ module.exports = {
     '@typescript-eslint'
   ],
   rules: {
+    semi: 0
   }
 }

src/cli/cli.ts

@@ -12,10 +12,10 @@ export function run (): void {
   program
     .version(version, '-v, --version', 'output the version number')
     .option('-d --rootDir <path>', 'the directory of project to be transfered')
-    .option('-t --type <type>', 'the type of the project, use vue-cli or webpack')
+    .option('-t --projectType <type>', 'the type of the project, use vue-cli or webpack')
     .parse(process.argv)
 
-  const keys = ['rootDir', 'type']
+  const keys = ['rootDir', 'projectType']
   const config: Config = {}
   keys.forEach(function (k) {
     if (Object.prototype.hasOwnProperty.call(program.opts(), k)) {
@@ -43,7 +43,7 @@ export function start (config : Config): void {
 
   genPackageJson(path.resolve(rootDir, 'package.json'))
 
-  geneViteConfig(rootDir, rootDir)
+  geneViteConfig(rootDir, rootDir, config.projectType)
 
   console.log('************************ Done ! ************************')
   const pkgManager = fs.existsSync(path.resolve(rootDir, 'yarn.lock'))

src/config/config.ts

@@ -1,6 +1,6 @@
 export interface Config {
     rootDir?: string;
-    type?: string;
+    projectType?: string;
 }
 
 export interface DevServer {

src/config/vite.ts

@@ -1,4 +1,5 @@
-import type { UserConfig, ResolveOptions } from 'vite'
+import type { UserConfig, ResolveOptions, BuildOptions } from 'vite'
+
 export class RawValue {
     value: string;
     constructor (val: string) {
@@ -9,15 +10,22 @@ export class RawValue {
       return this.value
     }
 }
+
 export declare interface Alias {
   find: RawValue | string;
   replacement: RawValue | string;
 }
+
+export declare interface Build extends Omit<BuildOptions, 'outDir'> {
+  outDir?: string | RawValue
+}
+
 export declare interface ViteConfig
-    extends Omit<UserConfig, 'plugins' | 'resolve'> {
+    extends Omit<UserConfig, 'plugins' | 'resolve' | 'build'> {
     plugins?: RawValue[];
 
     resolve?: ResolveOptions & {
         alias?: Alias[];
     };
+    build?: Build
 }

src/config/webpack.ts

@@ -25,7 +25,7 @@ export interface Resolve {
 
 export interface WebpackConfig extends Config {
     mode?: string;
-    entry?: string | [] | {} ;
+    entry?: string | string[];
     output?: Output;
     module?: Module;
     resolve?: Resolve;

src/generate/geneViteConfig.ts

@@ -1,11 +1,11 @@
 import path from 'path'
 import { TemplateData } from '../config/config'
-import { VueCliTransformer } from '../transform/transformVuecli'
+import { getTransformer } from '../transform/transformer'
 import { render, serializeObject } from './render'
 
-export async function geneViteConfig (rootDir: string, outDir: string): Promise<void> {
+export async function geneViteConfig (rootDir: string, outDir: string, projectType: string): Promise<void> {
   const template = path.resolve('src/template/vite.config.ejs')
-  const transformer = new VueCliTransformer()
+  const transformer = getTransformer(projectType)
   const viteConfig = await transformer.transform(rootDir)
   const configStr = serializeObject(viteConfig)
   const data: TemplateData = {

src/transform/transformWebpack.ts

@@ -27,7 +27,20 @@ export class WebpackTransformer implements Transformer {
       //      pc: './wap/index.js'
       // }
       config.mode = webpackConfig.mode
+      config.build = {}
 
+      // convert entry
+      if (webpackConfig.entry !== '' && webpackConfig.entry?.length !== 0) {
+        config.build.rollupOptions = {}
+        config.build.rollupOptions.input = webpackConfig.entry
+      }
+      // convert output
+      if (webpackConfig.output?.path !== '') {
+        const relativePath = path.relative(rootDir, webpackConfig.output.path).replace(/\\/g, '/')
+        config.build.outDir = new RawValue(`path.resolve(__dirname, '${relativePath}')`)
+      }
+
+      // convert alias
       const defaultAlias = []
 
       const alias = {
@@ -44,6 +57,6 @@ export class WebpackTransformer implements Transformer {
       config.resolve = {}
       config.resolve.alias = defaultAlias
 
-      return null
+      return config
     }
 }

src/transform/transformer.ts

@@ -1,5 +1,7 @@
 import { TransformContext } from './context';
 import { RawValue, ViteConfig } from '../config/vite';
+import { VueCliTransformer } from './transformVuecli';
+import { WebpackTransformer } from './transformWebpack';
 
 /**
  * general implementation for vue.config.js and webpack.config.js
@@ -12,25 +14,35 @@ export interface Transformer{
 
 }
 
-export function initViteConfig() : ViteConfig {
-    const config : ViteConfig = {}
-
-    const defaultAlias = []
-    defaultAlias.push({ find: new RawValue('/^~/'), replacement: ''});
-    defaultAlias.push({ find: '', replacement: new RawValue('path.resolve(__dirname,\'src\')')});
-
-    config.resolve = {};
-    config.resolve.alias = defaultAlias;
-    config.resolve.extensions = [
-        '.mjs',
-        '.js',
-        '.ts',
-        '.jsx',
-        '.tsx',
-        '.json',
-        '.vue',
-    ];
+export function initViteConfig () : ViteConfig {
+  const config : ViteConfig = {}
+
+  const defaultAlias = []
+  defaultAlias.push({ find: new RawValue('/^~/'), replacement: '' });
+  defaultAlias.push({ find: '', replacement: new RawValue('path.resolve(__dirname,\'src\')') });
+
+  config.resolve = {};
+  config.resolve.alias = defaultAlias;
+  config.resolve.extensions = [
+    '.mjs',
+    '.js',
+    '.ts',
+    '.jsx',
+    '.tsx',
+    '.json',
+    '.vue'
+  ];
+
+  return config;
+}
 
-    return config;
+export function getTransformer (projectType: string) : Transformer {
+  if (projectType === 'vue-cli') {
+    return new VueCliTransformer()
+  }
+  if (projectType === 'webpack') {
+    return new WebpackTransformer()
+  }
 
-}
+  return new VueCliTransformer()
+}