本教程总共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([,,],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
放在根目录下
<%= htmlWebpackPlugin.options.title %>
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 =`
`;
htmlCont = htmlCont.replace('', scriptInsert +'');
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 Reactfrom 'react';
import Header from '../common/Header';
import Footer from '../common/Footer';
class Indexextends React.Component {
render() {
return (
这是demo
);
}
}
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 Reactfrom 'react';
import '../../public/css/common.pcss';
const Header = () =>
这是头部
;
export default Header;
demo目录下的Index.jsx
import Reactfrom 'react';
class Indexextends React.Component {
render() {
return (
这是demo
);
}
}
export default Index;
index目录下的Index.jsx
import Reactfrom 'react';
import '../../public/css/index.pcss';
class Indexextends React.Component {
render() {
return (
这是首页
);
}
}
export default Index;
shop目录下的Index.jsx
import Reactfrom 'react';
import '../../public/css/shop.pcss';
class Indexextends React.Component {
render() {
return (
这是商城
);
}
}
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 namein entry) {
newEntry[name] = entry[name][0]
}
let config = {
entry: newEntry,
resolve: {
extensions: [".js", ".json", ".jsx", ".css", ".pcss"],
}
};
module.exports = config;
13、运行浏览器测试
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!
网友评论