React多页面应用4(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

今天我们来把 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、再刷新浏览器，就正常了