注意
- 弃用 npm run build & npm run dev & npm run dll
- 改成 box build & box dev & box dll
- link npm link 将 box 命令链接到全局
本章内容
- 使用
- 改造为脚手架
- 多页面配置
使用
|
1 |
box build # 不加参数则会编译所有页面，并清空 distbox dev # 默认编译 index 页面 |
参数
|
1 |
# index2 是指定编译的页面。不会清空 dist# report 开启打包分析box build index2 --reportbox dev index2 --report |
改造为脚手架
分成三个命令，进行不同操作
- build
- dev
- dll
bin/box.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
#!/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 (boxConf.pages) { 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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
module.exports = function(config) { return { entry: "src/main.js", // 默认入口 dist: "dist", // 默认打包目录 publicPath: "/", 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) {} }; }; |
未经允许不得转载：一点博客-青梅煮码-共享博客 » webpack 多页面配置
评论抢沙发