feat: init project

Author: wanglinquan

build.js

@@ -0,0 +1,5 @@
+const { resolveEntryConfig } = require('./utils/index')
+
+module.exports = function resolveBuild (api, options, key, immediate) {
+  return resolveEntryConfig('build', key, { immediate, api, options })
+}

generator.js

@@ -0,0 +1,3 @@
+module.exports = api => {
+
+}

index.js

@@ -0,0 +1,51 @@
+const resolveWatch = require('./watch')
+const resolveBuild = require('./build')
+const print = require('./utils/print')
+const initVueConfig = require('./utils/initVueConfig')
+
+module.exports = (api, options) => {
+  api.registerCommand('init-config', {
+    description: 'generate `vue.config.js`、`Views.json` file to your project',
+    usage: 'vue-cli-service init-config'
+  }, () => {
+    initVueConfig()
+  })
+
+  api.registerCommand('build-multi', {
+    description: 'build for multipage',
+    usage: 'vue-cli-service build-multi',
+    options: {
+      '--key': 'specify a key to build entry',
+      '--inspect': 'output <filename> the final webpack config'
+    }
+  },
+  (args) => {
+    const { key, inspect } = args
+    const immediate = typeof inspect === 'undefined' && !inspect
+    const config = resolveBuild(api, options, key, immediate)
+
+    if (!immediate) {
+      const outputFileName = typeof inspect === 'boolean' ? undefined : inspect
+      print(config, outputFileName)
+    }
+  })
+
+  api.registerCommand('watch-multi', {
+    description: 'watch for multipage',
+    usage: 'vue-cli-service watch-multi',
+    options: {
+      '--key': 'specify a key to build entry',
+      '--inspect': 'output <filename> the final webpack config'
+    }
+  },
+  (args) => {
+    const { key, inspect } = args
+    const immediate = typeof inspect === 'undefined' && !inspect
+    const config = resolveWatch(api, options, key, immediate)
+
+    if (!immediate) {
+      const outputFileName = typeof inspect === 'boolean' ? undefined : inspect
+      print(config, outputFileName)
+    }
+  })
+}

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "vue-cli-plugin-multiple-page",
+  "version": "0.1.0",
+  "main": "index.js",
+  "author": {
+    "name": "lenq",
+    "email": "qqcome110@gmail.com",
+    "url": "https://github.com/qqcome110/"
+  },
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/qqcome110/vue-cli-plugin-multiple-page/issues"
+  },
+  "peerDependencies": {
+    "@vue/cli-service": "^3.0.0 || ^4.0.0-0"
+  },
+  "devDependencies": {
+    "chalk": "^4.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "cli-highlight": "^2.1.4",
+    "cosmiconfig": "^7.0.0",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "prompts": "^2.3.2",
+    "webpack": "4.4.0",
+    "webpack-chain": "^6.5.1",
+    "husky": "^2.3.0",
+    "lint-staged": "^8.1.7",
+    "commitlint": "^8.0.0",
+    "commitlint-config-cz": "^0.11.1",
+    "cz-customizable": "^6.1.0",
+    "eslint": "^5.16.0",
+    "eslint-plugin-import": "^2.17.3",
+    "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-promise": "^4.1.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "babel-eslint": "^10.0.1",
+    "eslint-config-standard": "^12.0.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged",
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js}": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-customizable"
+    }
+  }
+}

template/Views.json

@@ -0,0 +1,12 @@
+{
+  "basePath": "resources/assets/js/views",
+  "destBasePath": "public/js/v",
+  "entry": {
+    "页面key": {
+      "srcPath": "your/entry/file/path",
+      "name": "index",
+      "output": "index",
+      "description": "页面描述"
+    }
+  }
+}

template/vue.config.js

@@ -0,0 +1,51 @@
+const path = require('path')
+
+module.exports = {
+  outputDir: 'dist',
+
+  assetsDir: '/',
+
+  filenameHashing: false,
+
+  // 是否使用包含运行时编译器的Vue核心的构建
+  runtimeCompiler: true,
+
+  // 默认情况下 babel-loader 忽略其中的所有文件 node_modules
+  transpileDependencies: [],
+
+  // 生产环境 sourceMap
+  productionSourceMap: false,
+
+  // webpack 配置，键值对象时会合并配置，为方法时会改写配置
+  // 针对该项目，建议在 chainWebpack 字段中使用链式调用方式配置，不支持在字段进行 webpack 相关配置
+  // 在自定义命令时，使用 vue-cli-service 提供的 resolveChainableWebpackConfig()进行配置重写后，该方法是通过new Config() 获得一个新的配置对象，忽略这个配置
+
+  // webpack 链接 API，用于生成和修改 webapck 配置
+  // https://github.com/mozilla-neutrino/webpack-chain
+  chainWebpack: (config) => {
+    config.externals({})
+
+    // config.optimization.splitChunks({
+    //   chunks: 'initial', // 必须三选一： "initial" | "all"(默认就是all) | "async",
+    //   name: 'vendor'
+    // })
+    // config.optimization.runtimeChunk({
+    //   name: 'manifest',
+    // })
+    // 设置别名
+    config.resolve.alias
+      .set('@', path.resolve(__dirname, 'src'))
+  },
+
+  // 配置高于chainWebpack中关于 css loader 的配置
+  css: {
+    // 是否开启支持 foo.module.css 样式
+    requireModuleExtension: false,
+
+    // 是否使用 css 分离插件 ExtractTextPlugin，采用独立样式文件载入，不采用 <style> 方式内联至 html 文件中
+    extract: false,
+
+    // 是否构建样式地图，false 将提高构建速度
+    sourceMap: false
+  }
+}

utils/index.js

@@ -0,0 +1,191 @@
+const path = require('path')
+const chalk = require('chalk')
+const webpack = require('webpack')
+const { cosmiconfig } = require('cosmiconfig')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const splitRe = /,/
+const CONFIG_NAME = 'Views.json'
+const CUSTOM_CONFIG_NAME = 'multiple-page'
+
+function getEntryConfig (config, key) {
+  const entryKeys = Object.keys(config)
+  const allEntryConfig = entryKeys.map(entryKey => {
+    const { entry, output, description, chunkName, extract } = config[entryKey] || {}
+
+    return {
+      key: entryKey,
+      extract,
+      entry,
+      output,
+      description,
+      chunkName
+    }
+  })
+
+  // 判断用户传入的 key 是否有效
+  if (splitRe.test(key)) {
+    return allEntryConfig.filter(ety => key.split(splitRe).indexOf(ety.key) > -1)
+  } else {
+    if (entryKeys.indexOf(key) > -1) {
+      return allEntryConfig.filter(ety => ety.key === key)
+    } else if (key === 'all') {
+      return allEntryConfig
+    } else {
+      return []
+    }
+  }
+}
+
+function normalizedConfig (entryFileJsonPath) {
+  const entryConfig = require(entryFileJsonPath)
+  const { entry: entries, basePath, destBasePath } = entryConfig
+  const entryKeys = Object.keys(entries)
+
+  return entryKeys.reduce((obj, key) => {
+    const currentEntry = entries[key]
+    // 设置当前页面对应 webpack 配置的 entry
+    const currentEntryFilePath = path.join(basePath, currentEntry.srcPath, currentEntry.name + '.js')
+    const entry = path.resolve(process.cwd(), currentEntryFilePath)
+    const outputFilePath = path.join(destBasePath, currentEntry.srcPath)
+    const output = path.resolve(process.cwd(), outputFilePath)
+
+    obj[key] = {
+      entry,
+      output,
+      extract: currentEntry.extract,
+      description: currentEntry.description,
+      chunkName: currentEntry.name
+    }
+
+    return obj
+  }, {})
+}
+
+async function getEntryFiles (key) {
+  const explorer = cosmiconfig(CUSTOM_CONFIG_NAME)
+  const entryFileJsonPath = process.env.VIEW_JSON || path.resolve(process.cwd(), CONFIG_NAME)
+  const result = await explorer.search()
+  let entryConfigs = []
+
+  // 命令行没有传入 key 时直接退出操作
+  if (!key || !key.toString().trim()) {
+    console.log(chalk.red('输入的key为空'))
+    process.exit(1)
+  }
+
+  if (result && !result.isEmpty && result.config) {
+    entryConfigs = getEntryConfig(result.config, key)
+  } else if (entryFileJsonPath) {
+    const config = normalizedConfig(entryFileJsonPath, key)
+    entryConfigs = getEntryConfig(config, key)
+  } else {
+    console.log(chalk.red(`找不到配置文件, 请指定 \`${CUSTOM_CONFIG_NAME}.config.js\` 或 \`View.json\` 文件进行配置`))
+    process.exit(1)
+  }
+
+  return entryConfigs
+}
+
+// [{ entry: '', output: '', description: '', chunkName: '' }, {  }]
+async function resolveEntryConfig (mode, key, { immediate = true, api, options }) {
+  const entryConfigs = await getEntryFiles(key)
+  const entryWebpackConfigs = []
+  const entryDescriptions = new Set()
+
+  if (Array.isArray(entryConfigs) && !entryConfigs.length) {
+    console.log(chalk.yellow('请指定正确的 key !'))
+    process.exit(1)
+  }
+
+  entryConfigs.forEach(entryConfig => {
+    // override vue's original configuration
+    options.css.extract = Boolean(entryConfig.extract)
+    const webpackConfigChain = api.resolveChainableWebpackConfig()
+
+    pruneDefaultWebpackConfig(webpackConfigChain)
+
+    if (mode === 'build') {
+      // 设置 mode 为 production
+      webpackConfigChain.mode('production')
+      // 关闭 watch 模式
+      webpackConfigChain.watch(false)
+
+      webpackConfigChain
+        .plugin('optimize-css')
+        .use(OptimizeCSSAssetsPlugin)
+    }
+
+    if (mode === 'watch') {
+      // 是否开启watch模式
+      webpackConfigChain.watch(true)
+    }
+    // set entry config
+    webpackConfigChain
+      .entry(entryConfig.chunkName)
+      .add(entryConfig.entry)
+
+    // set output config
+    webpackConfigChain
+      .output
+      .path(entryConfig.output)
+      .filename('[name].js')
+      .chunkFilename('[name].js')
+
+    // clean dist path
+    webpackConfigChain
+      .plugin('clean')
+      .use(CleanWebpackPlugin)
+
+    // save per entry file webpack config
+    entryWebpackConfigs.push(webpackConfigChain.toConfig())
+    entryDescriptions.add(entryConfig.description)
+
+    // clean entry config & dist config
+    webpackConfigChain.entryPoints.store.delete(entryConfig.output)
+    webpackConfigChain.output.clear()
+  })
+
+  if (entryDescriptions.size) {
+    [...entryDescriptions].forEach(description => {
+      console.log(chalk.green(description))
+    })
+  }
+
+  if (immediate) {
+    webpack(entryWebpackConfigs, (err, stats) => {
+      if (err || stats.hasErrors()) {
+        console.log(chalk.red('webpack build error!'))
+        // process.exit(1)
+      }
+    })
+  }
+
+  return entryWebpackConfigs
+}
+
+function pruneDefaultWebpackConfig (webpackConfigChain) {
+  // 删除默认入口
+  webpackConfigChain.entryPoints.store.delete('app')
+  // 删除 copy-webpack-plugin 插件,避免打包时将 public 文件夹打包到输出路径
+  webpackConfigChain.plugins.delete('copy')
+  // 删除 html-webpack-plugin 插件
+  webpackConfigChain.plugins.delete('html')
+  // 删除热加载插件
+  webpackConfigChain.plugins.delete('hmr')
+  // 删除 preload 和 prefetch 插件
+  webpackConfigChain.plugins.delete('preload')
+  webpackConfigChain.plugins.delete('prefetch')
+  // 禁止任何异步加载的 chunk
+  webpackConfigChain
+    .plugin('LimitChunkCountPlugin')
+    .use(webpack.optimize.LimitChunkCountPlugin, [{
+      maxChunks: 1
+    }])
+}
+
+module.exports = {
+  getEntryFiles,
+  resolveEntryConfig,
+  pruneDefaultWebpackConfig
+}