feat(多页面): webpack配置多页面打包

.npmignore

@@ -0,0 +1,6 @@
+docs
+node_modules
+.gitignore
+commitlint.config.js
+dist
+dll

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 1.0.0 (2019-11-25)
+## 1.0.2 (2019-11-26)
 
 ### 🌟 新功能
 

README.md

@@ -7,6 +7,7 @@
 - 课题 1: [初探 webpack？探究 webpack 打包原理](./docs/课时1.md)。
 - 课题 2：[搭建开发环境跟生产环境](./docs/课时2.md)
 - 课题 3：[基础配置之loader](./docs/课时3.md)
-- 课时 4：[webpack 性能优化 1](./docs/课时4.md)
+- 课时 4：[webpack性能优化](./docs/课时4.md)
 - 课时 5：[手写loader实现可选链](./docs/课时5.md)
 - 课时 6：[webpack编译优化](./docs/课时6.md)
+- 课时 7：[多页面配置](./docs/课时7.md)

bin/box.js

@@ -0,0 +1,79 @@
+#!/usr/bin/env node
+
+const chalk = require('chalk')
+const program = require('commander')
+const packageConfig = require('../package.json');
+const { cleanArgs } = require('../lib')
+const path = require('path')
+const __name__ = `build,dev,dll`
+
+let boxConf = {}
+let lock = false
+
+try {
+  boxConf = require(path.join(process.cwd(), 'box.config.js'))()
+} catch (error) { }
+
+program
+  .usage('<command> [options]')
+  .version(packageConfig.version)
+  .command('build [app-page]')
+  .description(`构建开发环境`)
+  .option('-r, --report', '打包分析报告')
+  .option('-d, --dll', '合并差分包')
+  .action(async (name, cmd) => {
+    const options = cleanArgs(cmd)
+    const args = Object.assign(options, { name }, boxConf)
+    if (lock) return
+    lock = true;
+    if (!name && boxConf.pages) {
+      args.clear = true
+      Object.keys(boxConf.pages).forEach(page => {
+        args.name = page;
+        require('../build/build')(args)
+      })
+    } else {
+      require('../build/build')(args)
+    }
+  })
+
+program
+  .usage('<command> [options]')
+  .version(packageConfig.version)
+  .command('dev [app-page]')
+  .description(`构建生产环境`)
+  .option('-d, --dll', '合并差分包')
+  .action(async (name, cmd) => {
+    const options = cleanArgs(cmd)
+    const args = Object.assign(options, { name }, boxConf)
+    if (lock) return
+    lock = true;
+    require('../build/dev')(args)
+  })
+
+program
+  .usage('<command> [options]')
+  .version(packageConfig.version)
+  .command('dll [app-page]')
+  .description(`编译差分包`)
+  .action(async (name, cmd) => {
+    const options = cleanArgs(cmd)
+    const args = Object.assign(options, { name }, boxConf)
+    if (lock) return
+    lock = true;
+    require('../build/dll')(args)
+  })
+
+program.parse(process.argv).args && program.parse(process.argv).args[0];
+program.commands.forEach(c => c.on('--help', () => console.log()))
+
+if (process.argv[2] && !__name__.includes(process.argv[2])) {
+  console.log()
+  console.log(chalk.red(`  没有找到 ${process.argv[2]} 命令`))
+  console.log()
+  program.help()
+}
+
+if (!process.argv[2]) {
+  program.help()
+}

box.config.js

@@ -0,0 +1,22 @@
+module.exports = function (config) {
+  return {
+    entry: 'src/main.js',
+    dist: 'dist',
+    publicPath: '/common/',
+    port: 8888,
+    pages: {
+      index: {
+        entry: 'src/main.js',
+        template: 'public/index.html',
+        filename: 'index.html',
+      },
+      index2: {
+        entry: 'src/main.js',
+        template: 'public/index2.html',
+        filename: 'index2.html',
+      }
+    },
+    chainWebpack(config) {
+    }
+  }
+}

build/base.js

@@ -7,12 +7,12 @@ const resolve = (p) => {
   return path.join(process.cwd(), p)
 }
 
-module.exports = () => {
+module.exports = (options) => {
   const map = new Map()
 
   files.map(_ => {
     const name = _.split('/').pop().replace('.js', '')
-    return map.set(name, require(_)(config, resolve))
+    return map.set(name, require(_)({config, resolve, options}))
   })
 
   map.forEach(v => v());

build/build.js

@@ -1,30 +1,36 @@
-const rimraf = require('rimraf');
-const ora = require('ora')
-const chalk = require('chalk')
-const path = require('path')
-// 删除 dist 目录
-rimraf.sync(path.join(process.cwd(), 'dist'))
+module.exports = function (options) {
+
+  const rimraf = require('rimraf');
+  const ora = require('ora')
+  const chalk = require('chalk')
+  const path = require('path')
+  // 删除 dist 目录
+  options.clear && rimraf.sync(path.join(process.cwd(), 'dist'))
 
-const config = require('./base')()
-const webpack = require('webpack')
-const spinner = ora('开始构建项目...')
-spinner.start()
-
-webpack(config.toConfig(), function (err, stats) {
-  spinner.stop()
-  if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n\n')
-
-  if (stats.hasErrors()) {
-    console.log(chalk.red('构建失败\n'))
-    process.exit(1)
+  const config = require('./base')(options)
+  const webpack = require('webpack')
+  const spinner = ora('开始构建项目...')
+  spinner.start()
+
+  if(typeof options.chainWebpack === 'function') {
+    options.chainWebpack(config)
   }
 
-  console.log(chalk.cyan('build完成\n'))
-})
+  webpack(config.toConfig(), function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red('构建失败\n'))
+      process.exit(1)
+    }
+    console.log(chalk.cyan('build完成\n'))
+  })
+}

build/dev.js

@@ -1,40 +1,44 @@
-const config = require('./base')()
+module.exports = function (options) {
+  const config = require('./base')(options)
+  const webpack = require('webpack')
+  const chalk = require('chalk')
+  const WebpackDevServer = require('webpack-dev-server')
+  const port = options.port || 8080;
+  const publicPath = options.publicPath || '/'
 
-const webpack = require('webpack')
-const chalk = require('chalk')
+  config.devServer
+    .quiet(true)
+    .hot(true)
+    .https(false)
+    .disableHostCheck(true)
+    .publicPath(publicPath)
+    .clientLogLevel('none')
 
-const WebpackDevServer = require('webpack-dev-server')
-const port = 8080;
-const publicPath = '/common/'
+  if (typeof options.chainWebpack === 'function') {
+    options.chainWebpack(config)
+  }
 
-config.devServer
-  .quiet(true)
-  .hot(true)
-  .https(false)
-  .disableHostCheck(true)
-  .publicPath(publicPath)
-  .clientLogLevel('none')
+  const compiler = webpack(config.toConfig())
+  // 拿到 devServer 参数
+  const chainDevServer = compiler.options.devServer
+  const server = new WebpackDevServer(compiler, Object.assign(chainDevServer, {}))
 
-const compiler = webpack(config.toConfig())
-// 拿到 devServer 参数
-const chainDevServer = compiler.options.devServer
-const server = new WebpackDevServer(compiler, Object.assign(chainDevServer, {}))
-
-  ;['SIGINT', 'SIGTERM'].forEach(signal => {
-    process.on(signal, () => {
-      server.close(() => {
-        process.exit(0)
+    ;['SIGINT', 'SIGTERM'].forEach(signal => {
+      process.on(signal, () => {
+        server.close(() => {
+          process.exit(0)
+        })
       })
-    })
-  });
-// 监听端口
-server.listen(port);
+    });
+  // 监听端口
+  server.listen(port);
 
-new Promise(() => {
-  compiler.hooks.done.tap('dev', stats => {
-    const empty = '    '
-    const common = `App running at:
-    - Local: http://127.0.0.1:${port}${publicPath}\n`
-    console.log(chalk.cyan('\n' + empty + common))
+  new Promise(() => {
+    compiler.hooks.done.tap('dev', stats => {
+      const empty = '    '
+      const common = `App running at:
+      - Local: http://127.0.0.1:${port}${publicPath}\n`
+      console.log(chalk.cyan('\n' + empty + common))
+    })
   })
-})
+}