嗨，我是你的稳定，更新，干货贼。

前段时间的黑盒内容“为什么要把CRA做成黑盒”“如何在黑盒里争取主动权”让很多小伙伴直接打电话“好家伙”，直接展示了一个操作。

今天我们继续在这篇文章中谈论 CRA 黑盒的实现。

不管是@vue/cli还是create-react-app，里面都有隐藏的黑盒机制。在这里，每个人都不应该将@vue/cli和create-react-app视为黑盒。它们只是用于快速构建项目基础设施的两个官方脚手架。

黑盒如何工作

在项目开发中，我们将其分为三个部分：一是项目结构，二是黑盒，三是最终输出。

简单来说，写好的项目变成了一个可以在黑盒后在线部署的产品。这个过程需要前端开发人员努力去实现。

其实黑盒很简单，就是我们需要打破通常的开发思维，为开发者提供更简单的解决方案。总之，可以概括为有多简单。

至于黑箱原则，我个人认为其实是包裹的 webpack 或者其他工具.

在本文中，我们将以webpack为例，编写一个自己的黑盒。

在开发正常使用的webpack时，我们需要手动创建一个webpack配置文件webpack.config.js

黑盒现在要做的是：

删除此配置文件，并在内部完成基本配置。如果你想自己配置，很抱歉，你必须更改新的配置文件demo.config.js(demo是你自己的名字)。

实际操作

有一个已配置的项目，如下所示：

配置文件的内容很简单，如下所示：

Const path=require ('path ')模块。exports={mode:' none '，entry: '。/src/index.js '，output3360 {path3360path。resolve (process.cwd()，' dist ')，文件名33366

在我们要移除 webpack.config.js 文件，同时在项目同级目录下建个 cwj-page 的文件夹。

这个 cwj-page 就是我们要实现的黑盒。

它里面的文件结构如下：

bin 文件夹是我们使用该文件夹名称当作指令要执行的文件，在 bin 文件夹下创建一个跟黑盒同名的 js 文件: cwj-page.js 内容如下：

#!/usr/bin/env nodeconst config = require("..")const webpack = require("webpack")const compiler = webpack(config,(err,state)=>{ if(err)throw err; console.log("编译成功")})

lib 是我们要存储的一个js文件，这个文件其实就是我们所有关于 webpack.config.js 的基本配置。

const path = require("path")const cwd = process.cwd()const fs = require("fs")let config = { mode:"none", entry:"./src/index.js", output:{ path:path.resolve(process.cwd(),"dist"), filename:"build.js" }}// const loadconfig = require(`${cwd}/page.config.js`)let cf = fs.existsSync(`${cwd}/page.config.js`)//判断当前目录下时候有约定的配置文件if(cf){ //有约定的配置文件 try { const loadconfig = require(`${cwd}/page.config.js`) config = Object.assign({},config,loadconfig) }catch(e){ console.log(e) }}else{ //没有约定的配置文件 onfig = Object.assign({},config)}module.exports = config

注意：在这个 cwj-page 下的 webpack 必须用 npm install webpack -S 下载，因为它是黑盒所依赖的模块，目的就是要对 webpack 进行包装。

完成之后我们现在要把 cwj-page 发布 npm 或者直接本地软连接，因为我们后面的操作要完全使用黑盒指令对项目打包。所以在 cwj-page 下的终端进行 npm link，这样在全局安装目录下就会有一个 cwj-page 的文件。