本教程总共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、运行浏览器测试
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!