React多页面应用4(webpack自动化生成多入口页面)

本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章!

1.React多页面应用1(webpack开发环境搭建,包括Babel、热更新等) ----2017.12.28

2.React多页面应用2(处理CSS及图片,引入postCSS及图片处理等)----2017.12.29

3.React多页面应用3(webpack性能提升,包括打包性能、提取公共包等)----2017.12.30

4.React多页面应用4(webpack自动化生成多入口页面)----2017.12.31

5.React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)----2018.01.01

6.React多页面应用6(gulp自动化发布到多个环境,生成版本号,打包成zip等)----2018.01.02

7.React多页面应用7(引入eslint代码检查)----2018.01.03

开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2

在之前课程中,我们发现,有很多重复劳动

如:

我们需要手动新建webpack入口文件

再 entryBuild 文件夹中新建,每个页面的js文件

index.js

shop.js

这两个文件 几乎是一样的

然后还需要在 build 文件夹中建立

两个对应的 html文件

index.html

shop.html

这两个文件几乎也是一样的

顺便还有一个问题就是

title 如何设置?

描述 和 关键词 如何设置?

我们现在来解决这些问题!!!!!!!!!!

  1. 设置 entry 入口文件 我们在 config 文件夹中 新建 entry.js ,以后我们新建页面,只需要在这里添加即可 path路径 会指向到 app->component 目录下
let entry = [
    {
        name: 'index',
        path: 'index/Index.jsx',
        title: '首页',
        keywords: '首页,xxx',
        description: '这是我们的首页'
    },
    {
        name: 'shop',
        path: 'shop/Index.jsx',
        title: '商城',
        keywords: '商城,xxx',
        description: '这是我们的商城'
    }
];
module.exports = entry;

2.接下来 我们要实现 自动化 生成 , webpack 的入口文件js,和html文件

在这之前我们需要写几个公共方法!

在config下,新建common

建立copyFile.js

// js/app.js:指定确切的文件名。
// js/*.js:某个目录所有后缀名为js的文件。
// js/**/*.js:某个目录及其所有子目录中的所有后缀名为js的文件。
// !js/app.js:除了js/app.js以外的所有文件。
// *.+(js|css):匹配项目根目录下,所有后缀名为js或css的文件。

//流 stream   管道 pipe 管道
//如果想在读取流和写入流的时候做完全的控制,可以使用数据事件。但对于单纯的文件复制来说读取流和写入流可以通过管道来传输数据。
/*
 * 复制目录中的所有文件包括子目录
 * @src param{ String } 需要复制的目录   例 images 或者 ./images/
 * @dst param{ String } 复制到指定的目录    例 images images/
 */
const fs = require("fs");
const path = require("path");
//获取当前目录绝对路径,这里resolve()不传入参数
const filePath = path.resolve();

const copy = function(src,dst){

    //判断文件需要时间,则必须同步
    if(fs.existsSync(src)){
        fs.readdir(src,function(err,files){
            if(err){console.log(err);return;}
            files.forEach(function(filename){

                //url+"/"+filename不能用/直接连接,Unix系统是”/“,Windows系统是”\“
                var url = path.join(src,filename),
                    dest = path.join(dst,filename);
                console.log(url);
                console.log(dest);
                fs.stat(path.join(src,filename),function(err, stats){
                    if (err) throw err;

                    //是文件
                    if(stats.isFile()){

                        //创建读取流
                        readable = fs.createReadStream(url);
                        //创建写入流
                        writable = fs.createWriteStream(dest,{ encoding: "utf8" });
                        // 通过管道来传输流
                        readable.pipe(writable);

                        //如果是目录
                    }else if(stats.isDirectory()){
                        exists( url, dest, copy );
                    }
                });
            });
        });
    }else{
        console.log("给定的目录不存,读取不到文件");
        return;
    }
};

function exists(url,dest,callback){
    fs.exists(dest,function(exists){
        if(exists){
            callback && callback(url,dest);
        }else{
            //第二个参数目录权限 ,默认0777(读写权限)
            fs.mkdir(dest,0777,function(err){
                if (err) throw err;
                callback && callback(url,dest);
            });
        }
    });
}
module.exports = copy;

建立deleteFile.js

const fs = require("fs");
const deleteFolderRecursive = function (path) {
    if (fs.existsSync(path)) {
        fs.readdirSync(path).forEach(function (file, index) {
            let curPath = path + "/" + file;
            if (fs.lstatSync(curPath).isDirectory()) { // recurse
                deleteFolderRecursive(curPath);
            } else { // delete file
                fs.unlinkSync(curPath);
            }
        });
        fs.rmdirSync(path);
    }
};

module.exports = deleteFolderRecursive;

建立 imgDel.js

let fs = require('fs');
let join = require('path').join;

/**
 *
 * @param startPath  起始目录文件夹路径
 * @returns {Array}
 */
function findSync(startPath) {
    let result = [];

    function finder(path) {
        let files = fs.readdirSync(path);
        files.forEach((val, index) => {
            let fPath = join(path, val);
            let stats = fs.statSync(fPath);
            if (stats.isDirectory()) finder(fPath);
            if(val.indexOf('png') !==-1 ||val.indexOf('gif') !==-1 || val.indexOf('jpg') !==-1){
                if (stats.isFile()) result.push(val.substring(0,val.length - 12));
            }
        });

    }

    finder(startPath);
    return result;
}

let fileNames = findSync('pc/resource/');
console.log(fileNames);

建立 nodeCommon.js

const deleteFile = require("./deleteFile");
const copyFile = require("./copyFile");
module.exports = {
    deleteFile,
    copyFile
};

建完后目录结构如下

3.新建entryBuild.js

const fs = require("fs");
const path = require("path");
const entry = require('./entry');
const nodeCommon = require('../common/nodeCommon');

const entryBuildPath = path.resolve(__dirname, '../../entryBuild');
nodeCommon.deleteFile(entryBuildPath);
fs.mkdirSync(entryBuildPath);

const entryContent = (data) => {
    let cont = `<Index />`;
    return `
import React from 'react';
import ReactDOM from 'react-dom';
import Index from '../app/component/${data.path}';
ReactDOM.render(${cont},document.getElementById('app'));
    `
};
/*生成webpack entry 入口文件*/
entry.map((data) => {
    fs.writeFile(entryBuildPath + '/' + data.name + '.js', entryContent(data), 'utf8', function (err) {
        if (err) {
            return console.log(err);
        }
    });
});

4.修改 package.json

"entry": "node config/entry/entryBuild.js",

我们现在 删除 entryBuild 文件夹

然后 执行 npm run entry

看下 是不是 创建了 entryBuild 文件夹 及 index.js shop.js

执行 npm run dev

一切正常

5.接下来我们自动化生成 html文件

我们需要建立一个模版 比如叫 index.html

放在根目录下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="telephone=no" name="format-detection">
    <title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
</body>
</html>

6.建立几个公用webpack js文件

webpack.com.conf.js

let titleFun = function(chunkName,title){
    let titleDef = 'XXX网站';
    if(chunkName.indexOf('index') !==-1){
        return titleDef;
    }else{
        return title + '_' + titleDef;
    }
};
module.exports = {
    titleFun:titleFun
};

添加依赖

npm i -D copy-webpack-plugin clean-webpack-plugin

修改 webpack.file.conf.js 文件

const path = require("path");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

function cleanFun(arr) {
    return (new CleanWebpackPlugin(arr, {root: path.resolve(__dirname, '../../'), verbose: true, dry: false}))
}

let copyObj = [
    /*{from: './app/public/plugin', to: './plugin'},
    {from: './app/public/versionTips', to: './versionTips'},
    {from: './app/public/file', to: './resource'},
    {from: './app/public/img/favicon.ico', to: './'},*/
];

let copyArr = [];
copyObj.map((data) => {
    copyArr.push(
        new CopyWebpackPlugin([{from: data.from, to: data.to, ignore: ['.*']}])
    )
});


module.exports = {
    devDirectory: 'build', /*开发目录*/
    proDirectory: 'pc', /*发布目录*/
    resource: 'resource', /*静态资源*/
    resourcePrefix: '/static/pc/', /*线上静态资源前缀*/
    cleanFun: cleanFun,
    copyArr: copyArr,
    copyObj: copyObj
};

7.新建 webpack.devBuildHtml.conf.js

const fs = require("fs");
const nodeCommon = require("../common/nodeCommon");
const webpackFile = require("./webpack.file.conf");
const entryBuild = require('../entry/entry');
const webpackComConf = require('./webpack.com.conf');
/*删除构建目录*/
nodeCommon.deleteFile(webpackFile.devDirectory);
/*创建构建目录*/
fs.mkdirSync(webpackFile.devDirectory);
webpackFile.copyObj.map((data) => {
    let to = webpackFile.devDirectory + data.to.substring(1, data.to.length);
    if (data.to !== './') {
        fs.mkdirSync(to);
    }
    nodeCommon.copyFile(data.from, to);
});
/*生成HTML*/
let htmlCont = fs.readFileSync("index.html", "utf-8");
let scriptInsert = `
<script type=text/javascript src=js/manifest.js></script>
<script type=text/javascript src=js/vendor.js></script>
<script type=text/javascript src=js/common.js></script>
<script type=text/javascript src=js/key.js></script>
`;
htmlCont = htmlCont.replace('</body>', scriptInsert + '</body>');
entryBuild.map((data) => {
    fs.writeFile(webpackFile.devDirectory + '/' + data.name + '.html',
        htmlCont.replace('js/key.js', 'js/' + data.name + '.js').replace('<%= htmlWebpackPlugin.options.title %>', webpackComConf.titleFun(data.name,data.title)),
        'utf8',
        function (err) {
            if (err) {
                return console.log(err);
            }
        });
});

8.修改package.json

"devBuildHtml": "node config/webpack/webpack.devBuildHtml.conf.js",

我们删除 根目录下的 build 文件夹,然后执行

npm run devBuildHtml

看下是否自动生成了 build 文件夹 和 index.html shop.html 文件

9.添加 webpack.entry.conf.js

const entryBuild = require('../entry/entry');
let entry = {};
entryBuild.map((data) => {
    entry[data.name] = ['./entryBuild/' + data.name + '.js', data.title];
});
module.exports = entry;

10.改造webpack.base.conf.js 统一入口文件

const entry = require("./webpack.entry.conf");
const json = require('../../package.json');//引进package.json
const newEntry = {};
for (let name in entry) {
    newEntry[name] = entry[name][0]
}
newEntry.vendor = Object.keys(json.dependencies); //把 package.json dependencies字段的值放进 vendor中
let config = {
    entry: newEntry,
    resolve: {
        extensions: [".js", ".json", ".jsx", ".css", ".pcss"],
    }
};
module.exports = config;

11.运行

npm run dev

一切OK

12.再往前走一步

修改 package.json

"devNew": "npm run entry && npm run devBuildHtml",

以后我们再有新页面,只需要在 config\entry\entry.js中添加就可以了

(目前 关键词,描述, 我们有去实现,也好实现,只是我们现在不太关注SEO,我只是预留了这个功能)

然后 我们只需要

有新页面的时候执行

npm run devNew

再执行

npm run dev

愉快的开发吧~~~~~~~~~~

原文发布于微信公众号 - 前端人人(frontend_everyone)

原文发表时间:2017-12-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏极客猴

Django 实战1:搭建属于自己社工查询系统(上)

前面的文章已经把模板、模型、视图、表单等知识点逐一讲解,大家已经熟悉它们具体用法。但如何将其串联起来还一筹莫展。本篇文章分享我之前做过的一个小项目,帮助大家抹开...

1.3K20
来自专栏伦少的博客

Centos7 Tomcat9 安装笔记

有两个月没更新博客,部分原因是这两月的工作一直没写Spark程序,而是在写前端,所以虽然期间一直想写但是没有想出从哪方面入手。后端框架用的SpringBoot,...

29510
来自专栏腾讯NEXT学位

JavaScript全栈开发-工具篇(下)

? 文章目录 ? 四、测试工具 1. 单元测试 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证。常见的单元测试工具有: * ...

13820
来自专栏菩提树下的杨过

利用Spring的@Async异步处理改善web应用中耗时操作的用户体验

Web应用中,有时会遇到一些耗时很长的操作(比如:在后台生成100张报表再呈现,或 从ftp下载若干文件,综合处理后再返回给页面下载),用户在网页上点完按钮后,...

27570
来自专栏偏前端工程师的驿站

.Net魔法堂:史上最全的ActiveX开发教程——自动更新、卸载篇

一、前言                               B/S模式的特点之一,客户端版本升级相对简单、快捷,适合产品的快速迭代。而ActiveX组...

19980
来自专栏杨建荣的学习笔记

深入理解Oracle中的DBCA

但凡是学习 过Oracle的同学,DBCA都是一个必备工具,有了这个工具,创建数据库成为可能。而DBCA本身有图形和静默两种方式。静默方式看起来高大上,可以轻松...

37890
来自专栏GopherCoder

Python 强化训练:第十篇

18030
来自专栏向治洪

React native开发中常见的错误

react native环境搭建请移步:react native环境搭建 这里说说react native创建完成之后,运行中出现的常见问题, 问题1: jav...

33860
来自专栏游戏杂谈

基于Node.js的Web Socket

以前看到过很多关于node.js的文章,但一直没有尝试去搭建node.js的环境。这里有一篇文章叫“websocket与node.js的完美结合”

18520
来自专栏中国白客联盟

Mac os提高效率的几款工具

Android studio/intellij idea:android动态调试。

15330

扫码关注云+社区

领取腾讯云代金券