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

546669204 发布于2019-08-23 14:40 / 2867人阅读

摘要：简单介绍首先本文不会对代码进行解释，其所有配置都可以在文档上找到。平时工作中会写一些多页面应用，因为习惯了的开发模式，故此写了一个简单的配置，跟大家一起分享。

简单介绍

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

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

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

项目目录介绍：

打包后文件目录：

打包成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进行了简单的说明，如果感兴趣了，可以深入研究

GPU云服务器云服务器 webpack cdn配置 webpack配置cdn webpack常用配置项基于云计算的应用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/100973.html

告别webpack react 搭建多页面之痛

摘要：搭建多页面应用在往下看之前请确保先上个凉的吃着目录结构编译结果配置文件脚本存放处项目开发中一些常用的方法主要存放和请求有关的静态文件模版文件项目开发中一些常用的方法其实我觉得可以和放在一块，但是个人习惯还是分开啦开始撸代码如何创建多页面应用 webpack4 搭建 react 多页面应用在往下看之前请确保nodejs > 8.X 先上个凉的吃着目录结构 . ├── dist ...

seanHai 2019-08-23 15:25 评论0 收藏0
基于webpack4.x, babel7.x 搭建的多页面脚手架, 简化前端开发环境配置，开箱即用，

摘要：开箱即用的多页面脚手架基于模块化开发可复用的现代化网站感兴趣的朋友，请点个及时关注项目更新请点个项目请提特性支持前后端分离开发配置完整的打包方案支持本地开发热更新集成代码风格校验支持编写源码，编译生成生产代码内置开发环境，自动加样式前缀自 Webpack-seed 开箱即用的多页面脚手架, 基于webpack4.2x babel7.1x模块化开发可复用的现代化网站(Without Vu...

junfeng777 2019-08-23 12:29 评论0 收藏0
基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战

摘要：原作者原链接基于多入口生成模板用于服务端渲染的方案及实战法律声明警告本作品遵循署名非商业性使用禁止演绎未本地化版本协议发布。这是什么背景现代化的前端项目中很多都使用了客户端渲染的单页面应用。原作者：@LinuxerPHL原链接：基于 Webpack 4 多入口生成模板用于服务端渲染的方案及实战法律声明警告：本作品遵循署名-非商业性使用-禁止演绎3.0 未本地化版本（CC BY-...

big_cat 2019-08-26 10:37 评论0 收藏0