React多页面应用5(webpack4 多页面自动化生成多入口文件)

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

1、React多页面应用1(webpack4 开发环境搭建,包括热更新,api转发等)---2018.04.04

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

3、React多页面应用3(webpack4 多页面实现)---2018.04.09

4、React多页面应用4(webpack4 提取第三方包及公共组件)---2018.04.10

5、React多页面应用5(webpack4 多页面自动化生成多入口文件)---2018.04.11

6、React多页面应用6(webpack4 开发环境打包性能小提升)---2018.04.12

7、React多页面应用7(webpack4 生产环境配置)---2018.04.13

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

9、React多页面应用9(webpack4 引入eslint代码检查)---2018.04.17

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

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

如:

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

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

index.js

shop.js

这两个文件 几乎是一样的

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

两个对应的 html文件

index.html

shop.html

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

顺便还有一个问题就是

title 如何设置?

描述 和 关键词 如何设置?

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

1、新建entry.js 入口文件

完整代码

module.exports = [
    {
        name: 'index',
        path: 'index/Index.jsx',
        title: '首页',
        keywords: '首页,xxx',
        description: '这是我们的首页'
    },
    {
        name: 'shop',
        path: 'shop/Index.jsx',
        title: '商城',
        keywords: '商城,xxx',
        description: '这是我们的商城'
    }
];

2、新建 entryBuild.js

这里要添加个依赖

npm i rimraf@2.6.2 -g

完整代码

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

//定义entryBuild
const entryBuildPath = path.resolve(__dirname, '../../entryBuild');
//删除entryBuild
rimraf.sync(entryBuildPath);
//创建entryBuild
fs.mkdirSync(entryBuildPath);
const entryContent = data => `import React from 'react';
import ReactDOM from 'react-dom';
import Index from '../app/component/${data.path}';
import Header from '../app/component/common/Header';
import Footer from '../app/component/common/Footer';
ReactDOM.render([<Header key="Header"/>,<Index key="Index"/>,<Footer key="Footer"/>],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);
        }
    });
});

在这里我们假定 头部很底部是每个页面都用到的!

3、package.json 添加命令

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

记得保存刷新下!

4、测试命令

我们删除entryBuild目录,

这是删除完的

执行

npm run entry

entrybuild 建立好,并生成了 index.js 及 shop.js

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
};

7.新建 webpack.devBuildHtml.conf.js

const fs = require("fs");
const rimraf = require('rimraf');
const webpackFile = require("./webpack.file.conf");
const entryBuild = require('../entry/entry');
const webpackComConf = require('./webpack.com.conf');
/*删除开发目录*/
rimraf.sync(webpackFile.devDirectory);
/*创建开发目录*/
fs.mkdirSync(webpackFile.devDirectory);

/*生成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",

9、我们删除 devBuild ,测试下

此时没有 devBuild

执行

npm run devBuildHtml

已经生成

10、我们再来优化下,把这两条命令合起来

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

11、我们来测试下,现在如何添加一个新页面

新建demo页面

app->component -> 新建demo文件夹,并建立Index.jsx

import React from 'react';
import Header from '../common/Header';
import Footer from '../common/Footer';

class Index extends React.Component {
    render() {
        return (
            <div className="cont">
                <Header/>
                <div className="index">
                    这是demo
                </div>
                <Footer/>
            </div>
        );
    }
}

export default Index;

然后我们只需要在,config->entry->entry.js中,添加

{
    name: 'demo',
    path: 'demo/Index.jsx',
    title: 'demo',
    keywords: 'demo,xxx',
    description: '这是我们的demo'
}

然后执行 npm run devNew

注意这里如果没有生成,刷新下工程,或者删除 跟目录下 .cache-loader 目录试试,这个在下个教程里会有,我提前装好了,生成的时候不出现,估计是它的原因!

12、做些其他修改

Header.jsx

import React from 'react';
import '../../public/css/common.pcss';
const Header = () =>
    <div className="top">
        <div>这是头部</div>
        <div>
            <i className="logo"/>
        </div>
        <div className="nav">
            <a href="/index.html">首页</a> <a href="/shop.html">商城</a> <a href="/demo.html">演示</a>
        </div>
    </div>
;

export default Header;

demo目录下的Index.jsx

import React from 'react';

class Index extends React.Component {
    render() {
        return (
            <div className="demo">
                这是demo
            </div>
        );
    }
}

export default Index;

index目录下的Index.jsx

import React from 'react';
import '../../public/css/index.pcss';

class Index extends React.Component {
    render() {
        return (
            <div className="index">
                这是首页
            </div>
        );
    }
}

export default Index;

shop目录下的Index.jsx

import React from 'react';
import '../../public/css/shop.pcss';

class Index extends React.Component {
    render() {
        return (
            <div className="shop">
                这是商城
            </div>
        );
    }
}

export default Index;

修改common.css 文件

app -> public -> css -> common.pcss

完整代码

#app {
  .top {
    color: #FF9302;
    .logo {
      display: inline-block;
      width: 200px;
      height: 200px;
      background-image: url("../img/ico-header-logo.png");
      background-size: contain;
    }
  }
  .bottom {
    color: #F00000;
  }
}

新建 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;

修改 config-> webpack -> webpack.base.conf.js

const entry = require("./webpack.entry.conf");
const newEntry = {};
for (let name in entry) {
    newEntry[name] = entry[name][0]
}
let config = {
    entry: newEntry,
    resolve: {
        extensions: [".js", ".json", ".jsx", ".css", ".pcss"],
    }
};
module.exports = config;

13、运行浏览器测试

本文完

如果你有什么问题,可以在下方留言给我们!

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

原文发表时间:2018-04-11

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web开发

Vue项目图片剪切上传——vue-cropper的使用

最近自己在研究vue,然后做了一个小型的后台管理系统用来练手,开发过程中,想到了剪切图片上传用户头像的需求。上网百度了一番,发现好多用的都是vue-croppe...

55430
来自专栏mwangblog

git标签

14830
来自专栏前端小记

React + TS + Ant Design 裁包小记

前段时间做了一个项目,是使用 Create-React-App 脚手架 + TypeScript + Ant Design 组件库搭建的,在减少包体积上有一些...

672120
来自专栏前端儿

[前端] 记录工作中遇到的各种问题(Bug,总结,记录)

而AjaxFileUpload插件的上传文件处理方式是,获取返回的实体内容,直接进行eval 解析,解析失败,报错,则无法上传

1.8K10
来自专栏较真的前端

使用神器eruda 进行移动端调试

38030
来自专栏finleyMa

实现基于最新chrome的动态按需加载组件

chrome63 版本后支持动态import 加载js https://developers.google.com/web/updates/2017/12/ni...

16920
来自专栏跟着阿笨一起玩NET

几款代码混淆器(DotFuscator, .NET Reactor, xenocode)(转)

56410
来自专栏小樱的经验随笔

基于Windows下python3.4.1IDLE常用快捷键小结

安装IDLE后鼠标右键点击*.py 文件,可以看到Edit with IDLE 选择这个可以直接打开编辑器。 IDLE默认不能显示行号,使用ALT+G 跳到对应...

41860
来自专栏前端儿

微信小程序 - 入门指引

设置 -> 开发者设置 -> 服务器域名中   配置好服务器域名,小程序才能正确地发起异步请求

1.1K10
来自专栏数据小魔方

如何将html格式动态图表网页嵌入ppt中

前几天魔方学院(其实就是我的公众号交流群啦~_~)的一位群友突然在群里提了一个问题! 看了之前推送的REmap相关内容,结果导出的图表是html格式的动态图,不...

6.6K70

扫码关注云+社区

领取腾讯云代金券