详解一个基于react+webpack的多页面应用配置


Posted in Javascript onJanuary 21, 2019

简单介绍

首先本文不会对webpack代码进行解释,其所有配置都可以在文档上找到。

平时工作中会写一些多页面应用,因为习惯了react的开发模式,故此写了一个简单的配置,跟大家一起分享。如果你也喜欢,对你的开发有所帮助,希望给点鼓励(start)

github地址:https://github.com/ivan-GM/Gm-cli

项目目录介绍:

详解一个基于react+webpack的多页面应用配置

打包后文件目录:

详解一个基于react+webpack的多页面应用配置

打包成cli如果你厌烦了新项目的复制、粘贴,也可以构建成cli

1,首先创建个文件夹,npm init初始化项目;

2, 创建bin目录,touch index.js 编写配置文件;

const commander = require('commander');
const inquirer = require('inquirer');
const download = require('download-git-repo')
const ora = require('ora');

const questions = [
 {
  type: 'input',
  name: 'projectName',
  message: 'project name:',
  filter: function (val) {
   return val;
  }
 }
]

commander
 .option('init', 'create project')
 .version('1.0', '-v, --version')

commander
 .command('init')
 .description('')
 .action(() => {
  inquirer.prompt(questions).then(answers => {
   const { projectName } = answers;
   const spinner = ora('Loading unicorns').start();
   spinner.color = 'green';
   spinner.text = 'downloading template...';
   download('direct:https://github.com/ivan-GM/live', projectName, { clone: true }, (err) => {
    if (err) {
     console.log(err)
    } else {
     spinner.stop()
     console.log('sucess')
    }
   })
  })
 });

commander.parse(process.argv);

3,添加命令:打开package.json

"bin": {
  "my-cli": "./bin/index.js"
 },

4,发布npm

*上面代码只是对打包成cli进行了简单的说明,如果感兴趣了,可以深入研究

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript window对象属性整理
Oct 24 Javascript
js截取小数点后几位的写法
Nov 14 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
使用getBoundingClientRect方法实现简洁的sticky组件的方法
Mar 22 Javascript
AngularJs入门教程之环境搭建+创建应用示例
Nov 01 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
js贪心算法 钱币找零问题代码实例
Sep 11 Javascript
使用layui实现树形结构的方法
Sep 20 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
vant实现购物车功能
Jun 29 Javascript
vue自定义指令和动态路由实现权限控制
Aug 28 Javascript
js中对象和面向对象与Json介绍
Jan 21 #Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 #Javascript
JavaScript常用事件介绍
Jan 21 #Javascript
JavaScript使用闭包模仿块级作用域操作示例
Jan 21 #Javascript
JavaScript闭包与作用域链实例分析
Jan 21 #Javascript
js中事件对象和事件委托的介绍
Jan 21 #Javascript
JavaScript作用域链实例详解
Jan 21 #Javascript
You might like
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
简单的cookie计数器实现源码
2013/06/07 PHP
深入PHP内存相关的功能特性详解
2013/06/08 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
取得父标签
2006/11/14 Javascript
js停止输出代码
2008/07/20 Javascript
jquery 可拖拽的窗体控件实现代码
2010/03/21 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
2013/07/04 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
2015/02/28 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
完美实现八种js焦点轮播图(下篇)
2020/04/20 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
layui表格设计以及数据初始化详解
2019/10/26 Javascript
微信小程序地图绘制线段并且测量(实例代码)
2020/01/02 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
python实现合并两个数组的方法
2015/05/16 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
浅谈pytorch 模型 .pt, .pth, .pkl的区别及模型保存方式
2020/05/25 Python
Python matplotlib读取excel数据并用for循环画多个子图subplot操作
2020/07/14 Python
HTML最新标准HTML5总结(必看)
2016/06/13 HTML / CSS
爱尔兰家电数码商城:Currys PC World爱尔兰
2016/07/23 全球购物
美国正宗奢华复古手袋、珠宝及配饰网站:What Goes Around Comes Around
2018/07/21 全球购物
The North Face官方旗舰店:美国著名户外品牌
2020/09/28 全球购物
自荐信写法介绍
2014/01/25 职场文书
股东合作协议书
2014/04/14 职场文书
党支部换届选举方案
2014/05/08 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2015年党建工作目标责任书
2015/05/08 职场文书
Golang入门之计时器
2022/05/04 Golang