详解一个基于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 相关文章推荐
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
Apr 01 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
Oct 11 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
Aug 23 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
详解a标签添加onclick事件的几种方式
Mar 29 Javascript
基于Vue实现电商SKU组合算法问题
May 29 Javascript
WEEX环境搭建与入门详解
Oct 16 Javascript
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
May 23 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中对用户身份认证实现两种方法
2011/06/04 PHP
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
php实现图片转换成ASCII码的方法
2015/04/03 PHP
测试JavaScript字符串处理性能的代码
2009/12/07 Javascript
基于jQuery制作迷你背词汇工具
2010/07/27 Javascript
jQuery语法总结和注意事项小结
2012/11/11 Javascript
jQuery数据缓存用法分析
2015/02/20 Javascript
基于jQuery.Hz2Py.js插件实现的汉字转拼音特效
2015/05/07 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
再谈Javascript中的异步以及如何异步
2016/08/19 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
jQuery结合jQuery.cookie.js插件实现换肤功能示例
2017/10/14 jQuery
解决Mac下安装nmp的淘宝镜像失败问题
2018/05/16 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
微信小程序导入Vant报错VM292:1 thirdScriptError的解决方法
2019/08/01 Javascript
JavaScript undefined及null区别实例解析
2020/07/21 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
Python中py文件引用另一个py文件变量的方法
2018/04/29 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
python处理multipart/form-data的请求方法
2018/12/26 Python
Python导入数值型Excel数据并生成矩阵操作
2020/06/09 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
css3翻牌翻数字的示例代码
2020/02/07 HTML / CSS
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
工商管理专业应届生求职信
2013/11/04 职场文书
办公室文书岗位职责
2013/12/16 职场文书
社团活动策划书范文
2014/01/09 职场文书
收银员岗位职责
2014/02/07 职场文书
马丁路德金演讲稿
2014/05/19 职场文书
医院保洁员管理制度
2015/08/05 职场文书