diff --git a/packages/cli/commands/create.js b/packages/cli/commands/create.js
index 4761f373..3c182036 100644
--- a/packages/cli/commands/create.js
+++ b/packages/cli/commands/create.js
@@ -1,5 +1,5 @@
 exports.registerCommand = (params) => {
-  const { program } = params
+  const { program, cleanArgs } = params
   program
     .command('create <app-name>')
     .description('创建一个项目')
diff --git a/packages/cli/lib/Creator.js b/packages/cli/lib/Creator.js
index ed1e25a4..43d4338f 100644
--- a/packages/cli/lib/Creator.js
+++ b/packages/cli/lib/Creator.js
@@ -1,9 +1,7 @@
-const debug = require('debug')
 const inquirer = require('inquirer')
 const EventEmitter = require('events')
 const Generator = require('./Generator')
 const cloneDeep = require('lodash.clonedeep')
-const getVersions = require('./util/getVersions')
 const PackageManager = require('./util/ProjectPackageManager')
 const { clearConsole } = require('./util/clearConsole')
 const PromptModuleAPI = require('./PromptModuleAPI')
@@ -13,7 +11,6 @@ const generateReadme = require('./util/generateReadme')
 
 const {
   defaults,
-  saveOptions,
   loadOptions,
   validatePreset
 } = require('./options')
@@ -21,7 +18,6 @@ const {
 const {
   chalk,
   execa,
-  semver,
   log,
   warn,
   error,
@@ -30,7 +26,6 @@ const {
   hasGit,
   hasYarn,
   hasPnpm3OrLater,
-  hasPnpmVersionOrLater,
   exit,
   loadModule
 } = require('@pkb/shared-utils')
@@ -72,37 +67,21 @@ module.exports = class Creator extends EventEmitter {
       (hasYarn() ? 'yarn' : null) ||
       (hasPnpm3OrLater() ? 'pnpm' : 'npm')
     )
+
     const pm = new PackageManager({ context, forcePackageManager: packageManager })
 
     await clearConsole()
     logWithSpinner('✨', `创建项目 in ${chalk.yellow(context)}.`)
-    this.emit('creation', { event: 'creating' })
-
-    const { current, latest } = await getVersions()
-    let latestMinor = `${semver.major(latest)}.${semver.minor(latest)}.0`
-    if (
-      /major/.test(semver.diff(current, latest)) ||
-      (semver.gte(current, latest) && semver.prerelease(current))
-    ) {
-      latestMinor = current
-    }
+
     const pkg = {
       name,
       version: '0.1.0',
       private: true,
       devDependencies: {}
     }
-    const deps = Object.keys(preset.plugins)
-    deps.forEach(dep => {
-      if (preset.plugins[dep]._isPreset) {
-        return
-      }
 
-      pkg.devDependencies[dep] = (
-        preset.plugins[dep].version ||
-        ((/^@vue/.test(dep)) ? `^${latestMinor}` : 'latest')
-      )
-    })
+    // todo 安装插件
+    const deps = Object.keys(preset.plugins)
 
     await writeFileTree(context, {
       'package.json': JSON.stringify(pkg, null, 2)
@@ -122,7 +101,6 @@ module.exports = class Creator extends EventEmitter {
 
     // run generator
     log('🚀  创建中...')
-    this.emit('creation', { event: 'invoking-generators' })
     const plugins = await this.resolvePlugins(preset.plugins)
     const generator = new Generator(context, {
       pkg,
@@ -133,7 +111,6 @@ module.exports = class Creator extends EventEmitter {
 
     // install additional deps (injected by generators)
     log('📦  安装依赖中...')
-    this.emit('creation', { event: 'deps-install' })
     log()
     if (!isTestOrDebug) {
       await pm.install()
@@ -141,7 +118,6 @@ module.exports = class Creator extends EventEmitter {
 
     // run complete cbs if any (injected by generators)
     logWithSpinner('⚓', '运行完成 hooks...')
-    this.emit('creation', { event: 'completion-hooks' })
     for (const cb of afterInvokeCbs) {
       await cb()
     }
@@ -157,28 +133,11 @@ module.exports = class Creator extends EventEmitter {
       'README.md': generateReadme(generator.pkg, packageManager)
     })
 
-    // generate a .npmrc file for pnpm, to persist the `shamefully-flatten` flag
-    if (packageManager === 'pnpm') {
-      const pnpmConfig = hasPnpmVersionOrLater('4.0.0')
-        ? 'shamefully-hoist=true\n'
-        : 'shamefully-flatten=true\n'
-
-      await writeFileTree(context, {
-        '.npmrc': pnpmConfig
-      })
-    }
-
-    // commit initial state
     let gitCommitFailed = false
     if (shouldInitGit) {
       await run('git add -A')
-      if (isTestOrDebug) {
-        await run('git', ['config', 'user.name', 'test'])
-        await run('git', ['config', 'user.email', 'test@test.com'])
-      }
-      const msg = typeof cliOptions.git === 'string' ? cliOptions.git : 'init'
       try {
-        await run('git', ['commit', '-m', msg])
+        await run('git', ['commit', '-m', 'init'])
       } catch (e) {
         gitCommitFailed = true
       }
@@ -187,15 +146,7 @@ module.exports = class Creator extends EventEmitter {
     stopSpinner()
     log()
     log(`🎉  成功创建项目 ${chalk.yellow(name)}.`)
-    if (!cliOptions.skipGetStarted) {
-      log(
-        '👉  开始使用以下命令:\n\n' +
-        (this.context === process.cwd() ? '' : chalk.cyan(` ${chalk.gray('$')} cd ${name}\n`)) +
-        chalk.cyan(` ${chalk.gray('$')} ${packageManager === 'yarn' ? 'yarn serve' : packageManager === 'pnpm' ? 'pnpm run serve' : 'npm run serve'}`)
-      )
-    }
     log()
-    this.emit('creation', { event: 'done' })
 
     if (gitCommitFailed) {
       warn(
@@ -217,18 +168,8 @@ module.exports = class Creator extends EventEmitter {
       await clearConsole(true)
       answers = await inquirer.prompt(this.resolveFinalPrompts())
     }
-    debug('vue-cli:answers')(answers)
 
-    if (answers.packageManager) {
-      saveOptions({
-        packageManager: answers.packageManager
-      })
-    }
-
-    let preset
-    if (answers.preset && answers.preset !== '__manual__') {
-      preset = await this.resolvePreset(answers.preset)
-    }
+    const preset = await this.resolvePreset(answers.preset)
 
     validatePreset(preset)
 
@@ -239,11 +180,12 @@ module.exports = class Creator extends EventEmitter {
     let preset
     const savedPresets = loadOptions().presets || {}
 
+    console.log(name, preset, savedPresets)
+
     if (name in savedPresets) {
       preset = savedPresets[name]
     } else if (name.includes('/')) {
       logWithSpinner(`Fetching remote preset ${chalk.cyan(name)}...`)
-      this.emit('creation', { event: 'fetch-remote-preset' })
       try {
         preset = await loadRemotePreset(name, clone)
         stopSpinner()
@@ -254,21 +196,17 @@ module.exports = class Creator extends EventEmitter {
       }
     }
 
-    if (name === 'default' && !preset) {
-      preset = defaults.presets.default
-    }
-
-    if (!preset) {
-      error(`preset "${name}" not found.`)
-      const presets = Object.keys(savedPresets)
-      if (presets.length) {
-        log()
-        log(`available presets:\n${presets.join('\n')}`)
-      } else {
-        log('you don\'t seem to have any saved preset.')
-      }
-      exit(1)
-    }
+    // if (!preset) {
+    //   error(`preset "${name}" not found.`)
+    //   const presets = Object.keys(savedPresets)
+    //   if (presets.length) {
+    //     log()
+    //     log(`available presets:\n${presets.join('\n')}`)
+    //   } else {
+    //     log('you don\'t seem to have any saved preset.')
+    //   }
+    //   exit(1)
+    // }
 
     return preset
   }
diff --git a/packages/cli/lib/create.js b/packages/cli/lib/create.js
index 5f66d37d..a82c75da 100644
--- a/packages/cli/lib/create.js
+++ b/packages/cli/lib/create.js
@@ -8,11 +8,7 @@ const { chalk, error, stopSpinner, exit } = require('@pkb/shared-utils')
 const validateProjectName = require('validate-npm-package-name')
 
 async function create(projectName, options) {
-  if (options.proxy) {
-    process.env.HTTP_PROXY = options.proxy
-  }
-
-  const cwd = options.cwd || process.cwd()
+  const cwd = process.cwd()
   const inCurrent = projectName === '.'
   const name = inCurrent ? path.relative('../', cwd) : projectName
   const targetDir = path.resolve(cwd, projectName || '.')
@@ -30,38 +26,34 @@ async function create(projectName, options) {
   }
   // 如果文件夹存在
   if (fs.existsSync(targetDir)) {
-    if (options.force) {
-      await fs.remove(targetDir)
+    await clearConsole()
+    if (inCurrent) {
+      const { ok } = await inquirer.prompt([
+        {
+          name: 'ok',
+          type: 'confirm',
+          message: '是否在当前目录下创建项目？'
+        }
+      ])
+      if (!ok) return
     } else {
-      await clearConsole()
-      if (inCurrent) {
-        const { ok } = await inquirer.prompt([
-          {
-            name: 'ok',
-            type: 'confirm',
-            message: '是否在当前目录下创建项目？'
-          }
-        ])
-        if (!ok) return
-      } else {
-        const { action } = await inquirer.prompt([
-          {
-            name: 'action',
-            type: 'list',
-            message: `目标文件夹 ${chalk.cyan(targetDir)} 已经存在. 选一种方式:`,
-            choices: [
-              { name: '覆盖', value: 'overwrite' },
-              { name: '合并', value: 'merge' },
-              { name: '删除', value: false }
-            ]
-          }
-        ])
-        if (!action) {
-          return
-        } else if (action === 'overwrite') {
-          console.log(`\n正在删除中 ${chalk.cyan(targetDir)}...`)
-          await fs.remove(targetDir)
+      const { action } = await inquirer.prompt([
+        {
+          name: 'action',
+          type: 'list',
+          message: `目标文件夹 ${chalk.cyan(targetDir)} 已经存在. 选一种方式:`,
+          choices: [
+            { name: '覆盖', value: 'overwrite' },
+            { name: '合并', value: 'merge' },
+            { name: '删除', value: false }
+          ]
         }
+      ])
+      if (!action) {
+        return
+      } else if (action === 'overwrite') {
+        console.log(`\n正在删除中 ${chalk.cyan(targetDir)}...`)
+        await fs.remove(targetDir)
       }
     }
   }
diff --git a/packages/cli/lib/options.js b/packages/cli/lib/options.js
index a8c6fd1a..739935b3 100644
--- a/packages/cli/lib/options.js
+++ b/packages/cli/lib/options.js
@@ -5,7 +5,7 @@ const { exit } = require('@pkb/shared-utils/lib/exit')
 const { error } = require('@pkb/shared-utils/lib/logger')
 const { createSchema, validate } = require('@pkb/shared-utils/lib/validate')
 
-const rcPath = exports.rcPath = getRcPath('.vuerc')
+const rcPath = exports.rcPath = getRcPath('.pkdrc')
 
 const presetSchema = createSchema(joi => joi.object().keys({
   bare: joi.boolean(),
@@ -55,6 +55,8 @@ exports.loadOptions = () => {
   if (cachedOptions) {
     return cachedOptions
   }
+
+  console.log(rcPath)
   if (fs.existsSync(rcPath)) {
     try {
       cachedOptions = JSON.parse(fs.readFileSync(rcPath, 'utf-8'))
diff --git a/packages/cli/lib/util/clearConsole.js b/packages/cli/lib/util/clearConsole.js
index ee3722e2..49fa9494 100644
--- a/packages/cli/lib/util/clearConsole.js
+++ b/packages/cli/lib/util/clearConsole.js
@@ -1,79 +1,10 @@
-const getVersions = require('./getVersions')
 const {
   chalk,
-  execa,
-  semver,
-  clearConsole,
-  hasYarn,
-  hasPnpm3OrLater
+  clearConsole
 } = require('@pkb/shared-utils')
 
-async function getInstallationCommand () {
-  if (hasYarn()) {
-    const { stdout: yarnGlobalDir } = await execa('yarn', ['global', 'dir'])
-    if (__dirname.includes(yarnGlobalDir)) {
-      return 'yarn global add'
-    }
-  }
-
-  if (hasPnpm3OrLater()) {
-    const { stdout: pnpmGlobalPrefix } = await execa('pnpm', ['config', 'get', 'prefix'])
-    if (__dirname.includes(pnpmGlobalPrefix) && __dirname.includes('pnpm-global')) {
-      return 'pnpm i -g'
-    }
-  }
-
-  const { stdout: npmGlobalPrefix } = await execa('npm', ['config', 'get', 'prefix'])
-  if (__dirname.includes(npmGlobalPrefix)) {
-    return 'npm i -g'
-  }
-}
-
-exports.generateTitle = async function (checkUpdate) {
-  const { current, latest, error } = await getVersions()
-  let title = chalk.bold.blue(`BOX v${current}`)
-
-  if (process.env.VUE_CLI_TEST) {
-    title += ' ' + chalk.blue.bold('TEST')
-  }
-  if (process.env.VUE_CLI_DEBUG) {
-    title += ' ' + chalk.magenta.bold('DEBUG')
-  }
-
-  if (error) {
-    title += '\n' + chalk.red('Failed to check for updates')
-  }
-
-  if (checkUpdate && !error && semver.gt(latest, current)) {
-    if (process.env.VUE_CLI_API_MODE) {
-    } else {
-      let upgradeMessage = `New version available ${chalk.magenta(current)} → ${chalk.green(latest)}`
-
-      try {
-        const command = await getInstallationCommand()
-        let name = require('@pkb/shared-utils/package.json').name
-        if (semver.prerelease(latest)) {
-          name += '@next'
-        }
-
-        if (command) {
-          upgradeMessage +=
-            `\nRun ${chalk.yellow(`${command} ${name}`)} to update!`
-        }
-      } catch (e) {}
-
-      const upgradeBox = require('boxen')(upgradeMessage, {
-        align: 'center',
-        borderColor: 'green',
-        dimBorder: true,
-        padding: 1
-      })
-
-      title += `\n${upgradeBox}\n`
-    }
-  }
-
-  return title
+exports.generateTitle = async function () {
+  return chalk.bold.blue('pk-cli')
 }
 
 exports.clearConsole = async function clearConsoleWithTitle (checkUpdate) {
diff --git a/packages/cli/lib/util/getVersions.js b/packages/cli/lib/util/getVersions.js
deleted file mode 100644
index 9c817e0e..00000000
--- a/packages/cli/lib/util/getVersions.js
+++ /dev/null
@@ -1,66 +0,0 @@
-const { semver } = require('@pkb/shared-utils')
-const PackageManager = require('./ProjectPackageManager')
-const { loadOptions, saveOptions } = require('../options')
-
-let sessionCached
-const pm = new PackageManager()
-
-module.exports = async function getVersions () {
-  if (sessionCached) {
-    return sessionCached
-  }
-
-  let latest
-  const local = require('@pkb/shared-utils/package.json').version
-  if (process.env.VUE_CLI_TEST || process.env.VUE_CLI_DEBUG) {
-    return (sessionCached = {
-      current: local,
-      latest: local
-    })
-  }
-
-  // should also check for prerelease versions if the current one is a prerelease
-  const includePrerelease = !!semver.prerelease(local)
-
-  const { latestVersion = local, lastChecked = 0 } = loadOptions()
-  const cached = latestVersion
-  const daysPassed = (Date.now() - lastChecked) / (60 * 60 * 1000 * 24)
-
-  let error
-  if (daysPassed > 1) {
-    // if we haven't check for a new version in a day, wait for the check
-    // before proceeding
-    try {
-      latest = await getAndCacheLatestVersion(cached, includePrerelease)
-    } catch (e) {
-      latest = cached
-      error = e
-    }
-  } else {
-    // Otherwise, do a check in the background. If the result was updated,
-    // it will be used for the next 24 hours.
-    // don't throw to interrupt the user if the background check failed
-    getAndCacheLatestVersion(cached, includePrerelease).catch(() => {})
-    latest = cached
-  }
-
-  return (sessionCached = {
-    current: local,
-    latest,
-    error
-  })
-}
-
-async function getAndCacheLatestVersion (cached, includePrerelease) {
-  let version = await pm.getRemoteVersion('@jijiang/packages-box', 'latest')
-  if (includePrerelease) {
-    const next = await pm.getRemoteVersion('@jijiang/packages-box', 'next')
-    version = semver.gt(next, version) ? next : version
-  }
-
-  if (semver.valid(version) && version !== cached) {
-    saveOptions({ latestVersion: version, lastChecked: Date.now() })
-    return version
-  }
-  return cached
-}
diff --git a/packages/cli/lib/util/loadRemotePreset.js b/packages/cli/lib/util/loadRemotePreset.js
index eb7c5438..a80b3ea7 100644
--- a/packages/cli/lib/util/loadRemotePreset.js
+++ b/packages/cli/lib/util/loadRemotePreset.js
@@ -7,6 +7,8 @@ module.exports = async function fetchRemotePreset (name, clone) {
   const download = require('download-git-repo')
   const tmpdir = path.join(os.tmpdir(), 'vue-cli')
 
+  console.log(os.tmpdir())
+
   if (clone) {
     await fs.remove(tmpdir)
   }
diff --git a/packages/cli/lib/util/rcPath.js b/packages/cli/lib/util/rcPath.js
index f23d8e2f..a6956408 100644
--- a/packages/cli/lib/util/rcPath.js
+++ b/packages/cli/lib/util/rcPath.js
@@ -5,7 +5,7 @@ const path = require('path')
 const xdgConfigPath = file => {
   const xdgConfigHome = process.env.XDG_CONFIG_HOME
   if (xdgConfigHome) {
-    const rcDir = path.join(xdgConfigHome, 'vue')
+    const rcDir = path.join(xdgConfigHome, 'pkd')
     if (!fs.existsSync(rcDir)) {
       fs.ensureDirSync(rcDir, 0o700)
     }
@@ -13,16 +13,13 @@ const xdgConfigPath = file => {
   }
 }
 
-// migration for 3.0.0-rc.7
-// we introduced a change storing .vuerc in AppData, but the benefit isn't
-// really obvious so we are reverting it to keep consistency across OSes
 const migrateWindowsConfigPath = file => {
   if (process.platform !== 'win32') {
     return
   }
   const appData = process.env.APPDATA
   if (appData) {
-    const rcDir = path.join(appData, 'vue')
+    const rcDir = path.join(appData, 'pkd')
     const rcFile = path.join(rcDir, file)
     const properRcFile = path.join(os.homedir(), file)
     if (fs.existsSync(rcFile)) {
diff --git a/template/rollup/public/index.html b/template/rollup/public/index.html
new file mode 100644
index 00000000..e69de29b
diff --git a/template/rollup/src/assets/my-pub.jpeg b/template/rollup/src/assets/my-pub.jpeg
new file mode 100644
index 00000000..cfd18e7e
Binary files /dev/null and b/template/rollup/src/assets/my-pub.jpeg differ
diff --git a/template/rollup/src/globalstyle/index.less b/template/rollup/src/globalstyle/index.less
new file mode 100644
index 00000000..546fd87e
--- /dev/null
+++ b/template/rollup/src/globalstyle/index.less
@@ -0,0 +1,7 @@
+.g-less-test () {
+  width: 100%;
+}
+
+.g-less-test {
+  width: 100%;
+}
diff --git a/template/rollup/src/globalstyle/index.scss b/template/rollup/src/globalstyle/index.scss
new file mode 100644
index 00000000..1186e763
--- /dev/null
+++ b/template/rollup/src/globalstyle/index.scss
@@ -0,0 +1,8 @@
+body {
+  width: 100%;
+}
+
+.g-scss-test {
+  width: 100%;
+}
+// $theme-color: #3385ff;
diff --git a/template/rollup/src/main.js b/template/rollup/src/main.js
new file mode 100644
index 00000000..d83693ef
--- /dev/null
+++ b/template/rollup/src/main.js
@@ -0,0 +1,8 @@
+// 加载react
+import Bar from './typescript/index.ts'
+
+new Bar()
+
+if (process.env.REACT === 'react') {
+  require('../packages/react/template')
+}
diff --git a/template/rollup/src/ssr.jsx b/template/rollup/src/ssr.jsx
new file mode 100644
index 00000000..3edec6d3
--- /dev/null
+++ b/template/rollup/src/ssr.jsx
@@ -0,0 +1,12 @@
+const ReactDOM = require('react-dom')
+
+const SSR = <div onClick={() => alert('hello')}>Hello world</div>
+
+if (typeof document === 'undefined') {
+  console.log('在服务端渲染')
+  module.exports = SSR
+} else {
+  console.log('在客户端渲染')
+  const renderMethod = !module.hot ? ReactDOM.render : ReactDOM.hydrate
+  renderMethod(SSR, document.getElementById('app'))
+}
diff --git a/template/rollup/src/style/app.css b/template/rollup/src/style/app.css
new file mode 100644
index 00000000..05b8390a
--- /dev/null
+++ b/template/rollup/src/style/app.css
@@ -0,0 +1,4 @@
+/* app.css */
+.test {
+  font-size: 60px;
+}
diff --git a/template/rollup/src/style/index.css b/template/rollup/src/style/index.css
new file mode 100644
index 00000000..a88e0627
--- /dev/null
+++ b/template/rollup/src/style/index.css
@@ -0,0 +1,8 @@
+/* index.css */
+.test {
+  width: 200px;
+  height: 200px;
+  color: red;
+  display: flex;
+  background-color: orange;
+}
diff --git a/template/rollup/src/style/index.js b/template/rollup/src/style/index.js
new file mode 100644
index 00000000..64f85a6a
--- /dev/null
+++ b/template/rollup/src/style/index.js
@@ -0,0 +1,5 @@
+require('./index.css')
+require('./app.css')
+require('./index.less')
+require('./index.scss')
+import('./index.postcss')
diff --git a/template/rollup/src/style/index.less b/template/rollup/src/style/index.less
new file mode 100644
index 00000000..0960604c
--- /dev/null
+++ b/template/rollup/src/style/index.less
@@ -0,0 +1,6 @@
+/* index.less */
+.test {
+  width: 300px;
+  color: @gray;
+  .g-less-test();
+}
diff --git a/template/rollup/src/style/index.postcss b/template/rollup/src/style/index.postcss
new file mode 100644
index 00000000..a9dec759
--- /dev/null
+++ b/template/rollup/src/style/index.postcss
@@ -0,0 +1,9 @@
+/* index.postcss */
+.test {
+  background: green;
+  height: 200px;
+}
+
+.asd {
+  height: 100px;
+}
diff --git a/template/rollup/src/style/index.scss b/template/rollup/src/style/index.scss
new file mode 100644
index 00000000..54fff83d
--- /dev/null
+++ b/template/rollup/src/style/index.scss
@@ -0,0 +1,5 @@
+/* index.scss */
+.test {
+  height: 300px;
+  // color: $gray;
+}
diff --git a/template/rollup/src/treeShaking.js b/template/rollup/src/treeShaking.js
new file mode 100644
index 00000000..18184363
--- /dev/null
+++ b/template/rollup/src/treeShaking.js
@@ -0,0 +1,12 @@
+import _ from 'lodash'
+
+export function square(x) {
+  console.log('我是一个 square')
+  console.log(_)
+  return x * x
+}
+
+export function cube(x) {
+  console.log('我是一个 cube')
+  return x * x * x
+}
diff --git a/template/rollup/src/typescript/Foo.ts b/template/rollup/src/typescript/Foo.ts
new file mode 100644
index 00000000..128e2d05
--- /dev/null
+++ b/template/rollup/src/typescript/Foo.ts
@@ -0,0 +1,6 @@
+export default class Foo {
+  constructor() {
+    const foo: string = 'i am foo'
+    console.log(foo)
+  }
+}
diff --git a/template/rollup/src/typescript/index.ts b/template/rollup/src/typescript/index.ts
new file mode 100644
index 00000000..79c36274
--- /dev/null
+++ b/template/rollup/src/typescript/index.ts
@@ -0,0 +1,10 @@
+import Foo from './Foo'
+
+new Foo()
+
+export default class Bar {
+  constructor() {
+    const bar: string = '123'
+    console.log(bar)
+  }
+}
diff --git a/template/webpack/public/index.html b/template/webpack/public/index.html
new file mode 100644
index 00000000..e69de29b
diff --git a/template/webpack/src/assets/my-pub.jpeg b/template/webpack/src/assets/my-pub.jpeg
new file mode 100644
index 00000000..cfd18e7e
Binary files /dev/null and b/template/webpack/src/assets/my-pub.jpeg differ
diff --git a/template/webpack/src/globalstyle/index.less b/template/webpack/src/globalstyle/index.less
new file mode 100644
index 00000000..546fd87e
--- /dev/null
+++ b/template/webpack/src/globalstyle/index.less
@@ -0,0 +1,7 @@
+.g-less-test () {
+  width: 100%;
+}
+
+.g-less-test {
+  width: 100%;
+}
diff --git a/template/webpack/src/globalstyle/index.scss b/template/webpack/src/globalstyle/index.scss
new file mode 100644
index 00000000..1186e763
--- /dev/null
+++ b/template/webpack/src/globalstyle/index.scss
@@ -0,0 +1,8 @@
+body {
+  width: 100%;
+}
+
+.g-scss-test {
+  width: 100%;
+}
+// $theme-color: #3385ff;
diff --git a/template/webpack/src/main.js b/template/webpack/src/main.js
new file mode 100644
index 00000000..d83693ef
--- /dev/null
+++ b/template/webpack/src/main.js
@@ -0,0 +1,8 @@
+// 加载react
+import Bar from './typescript/index.ts'
+
+new Bar()
+
+if (process.env.REACT === 'react') {
+  require('../packages/react/template')
+}
diff --git a/template/webpack/src/ssr.jsx b/template/webpack/src/ssr.jsx
new file mode 100644
index 00000000..3edec6d3
--- /dev/null
+++ b/template/webpack/src/ssr.jsx
@@ -0,0 +1,12 @@
+const ReactDOM = require('react-dom')
+
+const SSR = <div onClick={() => alert('hello')}>Hello world</div>
+
+if (typeof document === 'undefined') {
+  console.log('在服务端渲染')
+  module.exports = SSR
+} else {
+  console.log('在客户端渲染')
+  const renderMethod = !module.hot ? ReactDOM.render : ReactDOM.hydrate
+  renderMethod(SSR, document.getElementById('app'))
+}
diff --git a/template/webpack/src/style/app.css b/template/webpack/src/style/app.css
new file mode 100644
index 00000000..05b8390a
--- /dev/null
+++ b/template/webpack/src/style/app.css
@@ -0,0 +1,4 @@
+/* app.css */
+.test {
+  font-size: 60px;
+}
diff --git a/template/webpack/src/style/index.css b/template/webpack/src/style/index.css
new file mode 100644
index 00000000..a88e0627
--- /dev/null
+++ b/template/webpack/src/style/index.css
@@ -0,0 +1,8 @@
+/* index.css */
+.test {
+  width: 200px;
+  height: 200px;
+  color: red;
+  display: flex;
+  background-color: orange;
+}
diff --git a/template/webpack/src/style/index.js b/template/webpack/src/style/index.js
new file mode 100644
index 00000000..64f85a6a
--- /dev/null
+++ b/template/webpack/src/style/index.js
@@ -0,0 +1,5 @@
+require('./index.css')
+require('./app.css')
+require('./index.less')
+require('./index.scss')
+import('./index.postcss')
diff --git a/template/webpack/src/style/index.less b/template/webpack/src/style/index.less
new file mode 100644
index 00000000..0960604c
--- /dev/null
+++ b/template/webpack/src/style/index.less
@@ -0,0 +1,6 @@
+/* index.less */
+.test {
+  width: 300px;
+  color: @gray;
+  .g-less-test();
+}
diff --git a/template/webpack/src/style/index.postcss b/template/webpack/src/style/index.postcss
new file mode 100644
index 00000000..a9dec759
--- /dev/null
+++ b/template/webpack/src/style/index.postcss
@@ -0,0 +1,9 @@
+/* index.postcss */
+.test {
+  background: green;
+  height: 200px;
+}
+
+.asd {
+  height: 100px;
+}
diff --git a/template/webpack/src/style/index.scss b/template/webpack/src/style/index.scss
new file mode 100644
index 00000000..54fff83d
--- /dev/null
+++ b/template/webpack/src/style/index.scss
@@ -0,0 +1,5 @@
+/* index.scss */
+.test {
+  height: 300px;
+  // color: $gray;
+}
diff --git a/template/webpack/src/treeShaking.js b/template/webpack/src/treeShaking.js
new file mode 100644
index 00000000..18184363
--- /dev/null
+++ b/template/webpack/src/treeShaking.js
@@ -0,0 +1,12 @@
+import _ from 'lodash'
+
+export function square(x) {
+  console.log('我是一个 square')
+  console.log(_)
+  return x * x
+}
+
+export function cube(x) {
+  console.log('我是一个 cube')
+  return x * x * x
+}
diff --git a/template/webpack/src/typescript/Foo.ts b/template/webpack/src/typescript/Foo.ts
new file mode 100644
index 00000000..128e2d05
--- /dev/null
+++ b/template/webpack/src/typescript/Foo.ts
@@ -0,0 +1,6 @@
+export default class Foo {
+  constructor() {
+    const foo: string = 'i am foo'
+    console.log(foo)
+  }
+}
diff --git a/template/webpack/src/typescript/index.ts b/template/webpack/src/typescript/index.ts
new file mode 100644
index 00000000..79c36274
--- /dev/null
+++ b/template/webpack/src/typescript/index.ts
@@ -0,0 +1,10 @@
+import Foo from './Foo'
+
+new Foo()
+
+export default class Bar {
+  constructor() {
+    const bar: string = '123'
+    console.log(bar)
+  }
+}