问题:为什么我们不直接只用webpack-cli直接打包不就好了吗。
回答:这个问题没有毛病,我们的webpack整个项目就是只用一个工程的时候,是没有问题的。但是有一种情况,我们需要使用一个webpacl-cli开控制一个目录下的所有项目。这个目录下有非常多的单页,且每一个单页都是以一个项目。与其他的单页没没有联系。同时要给多人同时进行这个目录下的不同单页的开发。这个时候。一个自己命令行脚手架就会变得非常有必要的
笔者做了一个基于webpack的脚手架。下面教你如何搭建自己的前端脚手架
其中的核心思想是webpack中的 入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。
本文假设你已经安装了node,同时了解webpack中的相关参数的配置,假如对webpack的配置不是很了解->>>点击跳转
我已经将做好的一个简单的项目放到了gitlub上,关于webapck的配置是不全的,点击跳转,添加你需要的相关配置项
gitlub:https://github.com/soGooday/make-self-webpack-cli
使用webpack作为一个自己定义的命令行脚手架,我们需要明确几点
1,如何使用node创建自己命令行
2,如何在不使用webpack-cli得情况是下启动webpack插件
3,如何在不使用webpack-dev-server得情况是下开启一个本地的服务器。
下面我会就这三个作为整个的基础,来进行处理创建自己的交手教
问:
1,如何使用node运行一个js脚本
2,webpack.json中bin里面放什么参数
3,如何拿到命令行中输入的相关参数
答:
1,node下运行一个js脚本
首先创建一个空文件夹名字叫 make-self-webpack-cli,并在文件夹下创建一个叫做index.js的文件,里面写上我们的老朋友
console.log('hello world');
此时我们的文件目录是这样的红框部分,这里有一个孤独的守望者。我们难过只有他孤零零的站在。
黄框就是我们写入的内容
然后按下 ctrl+~ 或者是鼠标右键击红色非index文件地方,选择在终端中打开。
然后输入神奇的 node index.js 指令 我们就看见了篮筐的内容了。简直是棒极了。我们完成了一个问题,node执行一个脚本文件
2,
然后再z终端中继续输入 如下指令。嘿,伙计这个是件很严肃的事情!
npm init -y
这个时候,你就会发现一个叫做 webapck.json的文件,终于index.js有了自己的朋友了。
我自己和你一样,想迫不及待的打开它,看看有没有什么可以帮助它的。再给他们搞些它们喜欢朋友。
{ "name": "webpack01", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", }, "keywords": [], "author": "", "license": "ISC", }
原来这里是关于webapck.json身世。我们仔细看发现了一行特殊的字符
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", },
等下伙计们,是的,就是他,刚刚webpack.json告诉我这个相关简写配置项 通过 key:value的键值对。从而可以让我们偷偷来懒。我靠这也太让人喜欢了。我打算带着你们尝试尝试。
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "index":"node index.js" },
其中"index":"node index.js"是我们新增的,
此时我在上述的绿框中的终端中写下
npm run index
好了,我们可以发现依旧打印出来了 ‘holle world’的字段。是的这就是们些的第一个指令,虽然这个指令中index字段是我们自己创建。下面我们将会学习如何创建一个完全的自定义指令,而不再借助于 node 开头的指令
3,
打造自己的node 指令
我们需要在package.js中,修改一些参数,让它变得更加的强壮,
{ "bin": { "happly": "./bin/index.js" }, }
上面的参数中我们,我们就相当于创建了一个happly指令 同时 指定一个要链接的脚本,是的伙计。相当于懒省事。
我们在相关目录下创建这个index.js的脚本。但是需要我们是加一些魔法,让这个脚本变为node的土壤(就是告诉电脑系统我们需要在node环境下运行)
//.bin/index.js脚本里面 #!/usr/bin/env node console.log('我知道你刚刚输入的指令是什么:',process.argv.slice(2))
是的,我们需要让node知道 这个happly的指令是我们自己定义。才能让我们顺利的启动。可以去查查下面指令的作用哦
npm link
然后我们就能实现我们的目的了
happly ahahahaha
嘿!伙计恭喜你! 已经能够实定义自己的node指令。我们已经完成了第一部分