本教程总共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
今天我们来把 react,react-dom 放到 vendor.js,公共组件部分放到common.js,
因为 webpack3 的 CommonsChunkPlugin 被移除,所有今天我们要用到webpack4 的 splitChunks!
废话不多说,撸码开始!
1、公用代码做成公共组件
我们先来分析下什么算是公用代码?
红色部分是不一样的!其余部分重复了,我们可以做成公用组件!
2、新建common目录,并新建Header.jsx 及 Footer.jsx
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> </div> </div> ; export default Header;
Footer.jsx
import React from 'react'; const Footer = () => <div className="bottom"> 这是底部 </div> ; export default Footer;
3、修改首页Index.jsx
import React from 'react'; import Header from '../common/Header'; import Footer from '../common/Footer'; import '../../public/css/index.pcss'; class Index extends React.Component { render() { return ( <div className="cont"> <Header/> <div className="index"> 这是首页 </div> <Footer/> </div> ); } } export default Index;
4、修改商城Index.jsx
import React from 'react'; import Header from '../common/Header'; import Footer from '../common/Footer'; import '../../public/css/shop.pcss'; class Index extends React.Component { render() { return ( <div className="cont"> <Header/> <div className="shop"> 这是商城 </div> <Footer/> </div> ); } } export default Index;
5、查看浏览器 是否正常
6、重点部分,提取第三方包及公共组件
config-> webpack -> webpack.dev.conf.js
新增如下代码
optimization: { //包清单 runtimeChunk: { name: "manifest" }, //拆分公共包 splitChunks: { cacheGroups: { //项目公共组件 common: { chunks: "initial", name: "common", minChunks: 2, maxInitialRequests: 5, minSize: 0 }, //第三方组件 vendor: { test: /node_modules/, chunks: "initial", name: "vendor", priority: 10, enforce: true } } } },
完整代码
const webpack = require('webpack');//引入webpack const opn = require('opn');//打开浏览器 const merge = require('webpack-merge');//webpack配置文件合并 const path = require("path"); const baseWebpackConfig = require("./webpack.base.conf");//基础配置 const webpackFile = require("./webpack.file.conf");//一些路径配置 let config = merge(baseWebpackConfig, { /*设置开发环境*/ mode: 'development', output: { path: path.resolve(webpackFile.devDirectory), filename: 'js/[name].js', chunkFilename: "js/[name].js", publicPath: '' }, optimization: { //包清单 runtimeChunk: { name: "manifest" }, //拆分公共包 splitChunks: { cacheGroups: { //项目公共组件 common: { chunks: "initial", name: "common", minChunks: 2, maxInitialRequests: 5, minSize: 0 }, //第三方组件 vendor: { test: /node_modules/, chunks: "initial", name: "vendor", priority: 10, enforce: true } } } }, plugins: [ /*设置热更新*/ new webpack.HotModuleReplacementPlugin(), ], module: { rules: [ { test: /\.(js|jsx)$/, use: [ 'babel-loader', ], include: [ path.resolve(__dirname, "../../app"), path.resolve(__dirname, "../../entryBuild") ], exclude: [ path.resolve(__dirname, "../../node_modules") ], }, { test: /\.(css|pcss)$/, loader: 'style-loader?sourceMap!css-loader?sourceMap!postcss-loader?sourceMap', exclude: /node_modules/ }, { test: /\.(png|jpg|gif|ttf|eot|woff|woff2|svg|swf)$/, loader: 'file-loader?name=[name].[ext]&outputPath=' + webpackFile.resource + '/' } ] }, /*设置api转发*/ devServer: { host: '0.0.0.0', port: 8080, hot: true, inline: true, contentBase: path.resolve(webpackFile.devDirectory), historyApiFallback: true, disableHostCheck: true, proxy: [ { context: ['/api/**', '/u/**'], target: 'http://192.168.12.100:8080/', secure: false } ], /*打开浏览器 并打开本项目网址*/ after() { opn('http://localhost:' + this.port); } } }); module.exports = config;
重新执行 npm run dev
多出来 三个文件分别是:
manifest.js(包清单)
vendor.js(第三方包,明显体积很大,这是开发环境,生产环境会再压缩)
common.js(公共组件)
此时浏览器应该是空白,因为缺少这三个文件!
7、修改html文件
devBulid 下 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>react1</title> </head> <body> <div id="app"></div> <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/index.js></script> </body> </html>
devBulid 下 shop.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>react1</title> </head> <body> <div id="app"></div> <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/shop.js></script> </body> </html>
8、再刷新浏览器,就正常了
本文完
禁止擅自转载,如需转载请在公众号中留言联系我们!
感谢童鞋们支持!
如果你有什么问题,可以在下方留言给我们!