通过webpack从零开始搭建React项目

╰半夏微凉° 2023-06-13 06:23 14阅读 0赞

# 从零开始搭建React项目 #

## 1. Webpack基础概念 ##

webpack主要作用：

*  代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等。
 *  文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等。
 *  代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载。
 *  模块合并：在采用模块化的项目里会有很多个模块和文件，需要构建功能把模块分类合并成一个文件。
 *  自动刷新：监听本地源代码的变化，自动重新构建、刷新浏览器。
 *  代码校验：在代码被提交到仓库前需要校验代码是否符合规范，以及单元测试是否通过。
 *  自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

Webpack 有以下几个核心概念：

*  **Entry**：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
 *  **Module**：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
 *  **Chunk**：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
 *  **Loader**：模块转换器，用于把模块原内容按照需求转换成新内容。
 *  **Plugin**：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
 *  **Output**：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。

构建过程：

1.  从 Entry 里配置的 Module 开始递归解析 Entry 依赖的所有 Module。
2.  每找到一个 Module， 就会根据配置的 Loader 去找出对应的转换规则。
3.  对 Module 进行转换后，再解析出当前 Module 依赖的 Module。
4.  这些模块会以 Entry 为单位进行分组，一个 Entry 和其所有依赖的 Module 被分到一个组也就是一个 Chunk。
5.  最后 Webpack 会把所有 Chunk 转换成文件输出。
6.  在整个流程中 Webpack 会在恰当的时机执行 Plugin 里定义的逻辑。

## 2. 项目需求 ##

使用Webpack 4.x 搭建项目，满足以下需求：

1.  使用ES6语言
2.  使用React框架
3.  自动生成HTML
4.  webpack-dev-server
5.  加载样式（CSS、SCSS）
6.  加载静态资源（图片、字体）
7.  使用第三方库
8.  其他（clean,merge,source map）

## 3. 实战 ##

### 3.1 基础环境 ###

NodeJS版本10.4.1。

1.  初始化生成一个 `package.json` 文件。
    
        npm init -y
2.  本地安装webpack
    
    webpack4版本命名行相关的功能独立到Webpack-cli。
    
        npm i webpack webpack-cli -D
3.  新建webpack.config.js 配置文件。
    
        webpack默认会查找 webpack.config.js 作为配置文件。
        
        自定义配置文件名称：
        webpack --config xx.js
4.  基础配置
    
        webpack配置采用commonJS规范，通过module.export导出一个描述如何构建的 Object 对象。
        
        module.exports={
            entry:{},     //入口配置*
            output:{},    //出口配置*
            modules:{},   //module.rules loader
            plugins:[],   //插件
            devServer:{}   //开发服务器
        }

### 3.2 ES6 ###

3.2.1 前置步骤

1.  按如下结构创建相应文件与目录：
    
        │  package.json
        │  webpack.config.js
        ├─dist
        │      index.html        
        └─src
                main.js
2.  main.js 内容：
    
        class Ui {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
        
            coding() {
                return `${this.name} is coding`;
            }
        }
        
        let ui= new Ui('hqz','18');
        
        document.getElementById('app').innerText=ui.coding();
3.  index.html 内容：
    
        <html>
        <head>
        	<meta charset="UTF-8">
        	<title>ES6</title>
        </head>
        <body>
            <div id="app"></div>
            <script src="bundle.js"></script>    //手动引入打包后的JS
        </body>
        </html>
4.  webpack配置
    
        const path=require("path");
        
        module.exports={
            entry:'./src/main.js',     //入口文件
            output:{                   //出口配置
                filename: 'bundle.js', //出口文件名
                path: path.resolve(__dirname, 'dist')  //出口文件路径
            },
            module: {},    //module.rules loader
            plugins:[],    //插件
            devServer:{}   //开发服务器
        };

3.2.2 配置Babel

目前浏览器对ES6的标准支持不全，所以我们需要把ES6转换成ES5，包含以下两件事：

1.  把新的 ES6 语法用 ES5 实现。
2.  给新的 API 注入 polyfill。

babel可以方便的完成以上2件事。 babel-preset-env的工作方式类似于babel-preset-latest，但它允许您指定环境并仅转换该环境中缺少的功能。

babel 7.X的主要变更：

*  删除对未维护的 Node 版本的支持：0.10,0.12,2,5
 *  删除“Stage” & 年度预设（preset-es2015 等）， 用@babel/preset-env 取代。
 *  对部分软件包进行重命名（e.g. babel-core–>@babel/core）

简单升级：

1.  利用babel-upgrade
    
        npm i babel-upgrade -g
        babel-upgrade --write
2.  重新安装包
3.  修改配置文件中的包名

配置：

1.  本地安装Babel
    
        npm i -D @babel/core @babel/preset-env babel-loader
        @babel/plugin-transform-object-rest-spread @babel/plugin-transform-export-extensions @babel/plugin-transform-class-properties @babel/plugin-syntax-dynamic-import
2.  配置webpack
    
        在module.rules中添加如下：
        module: {
                rules: [{
                    test: /\.js$/,    //使用正则匹配所有需要使用babel-loader的文件
                    use: {
                        loader: "babel-loader",  //指明要使用的loader
                        options: {               //传入loader的参数
                            presets: [           //用于解析一组语法特性
                                [
                                    "@babel/preset-env",       //包含当前所有 ECMAScript 标准里的最新特性
                                    {
                                        "targets": {   //指定需要兼容的浏览器类型和版本
                                            "browsers": [
                                                "> 1%",     //支持市场份额超过1％的浏览器。
                                                "ie >= 9"   //支持IE9以上的版本
                                            ]
                                        }
                                    }
                                ]
                            ],
                            plugins: [         //用于解析某个语法特性
                                "@babel/plugin-proposal-object-rest-spread", //解析对象的扩展运算符（ES2018）
                                "@babel/plugin-proposal-export-default-from",  //解析额外的export语法:export v from "xx/xx"
                                "@babel/plugin-proposal-export-namespace-from", //解析额外的export语法:export v as vv from "xx/xx";
                                "@babel/plugin-proposal-class-properties",   //解析class中的静态属性
                                "@babel/plugin-syntax-dynamic-import"         //解析import方法
                            ]
                        }
                    }
        
                }]
            },
3.  执行编译
    
        package.json 的 script字段添加如下：
        "build": "webpack"
        
        执行 npm run build
    
    编译完成后，dist文件夹下多出一个bundle.js文件，打包成功。

### 3.3 React ###

3.3.1 前置步骤

1.  本地安装react
    
        npm i -D react react-dom
2.  mian.js
    
        import React, { Component } from 'react';
        import ReactDOM from 'react-dom';
        
        class App extends Component {
            render() {
                return <h1>Hello word!</h1>
            }
        }
        ReactDOM.render(<App />, document.getElementById('app'));

3.3.2 配置Babel

Babel也可用于解析JSX，需要使用babel-preset-react。

1.  本地安装babel-preset-react
    
        npm i -D @babel/preset-react
2.  配置webpack (在ES6环境的基础上)
    
        在module.rules中添加如下：
        module: {
                rules: [{
                    test: /\.js$/,   
                    use: {
                        loader: "babel-loader", 
                        options: {               
                            presets: ["@babel/preset-env","@babel/preset-react"]  //用于解析ES6+React
                        }
                    }
        
                }]
            },

### 3.4 自动生成HTML ###

3.4.1 单个页面

使用html-webpack-plugin 自动生成HTML，并引入相应文件。

1.  将index.html移到src目录下，并重命名：
    
        │  package.json
        │  webpack.config.js
        ├─dist     
        └─src
                main.js
                template.html
2.  template.html 内容：
    
        <html>
        <head>
        	<meta charset="UTF-8">
        	<title>自动生成HTML</title>
        </head>
        <body>
            <div id="app"></div>     //去掉手动引入script
        </body>
        </html>
3.  本地安装
    
        npm i -D html-webpack-plugin
4.  webpack配置
    
        const HtmlWebpackPlugin = require('html-webpack-plugin');  //引入插件
        
        plugins:[
            new HtmlWebpackPlugin({
            	template:'./src/template.html',  //html模板
            })
        ]
5.  编译
6.  编译后生成的HTML
    
        <html>
        <head>
          <meta charset="UTF-8">
          <title>自动生成HTML</title>
        </head>
        <body>
        <div id="app"></div>
        <script type="text/javascript" src="bundle.js"></script>   //自动引入JS文件
        
        </body>
        </html>

3.4.2 多个页面

如果单页应用中需要多个页面入口，或者多页应用时配置多个html时，那么就需要实例化该插件多次。

1.  目录结构要求：
    
        │  package.json
        │  webpack.config.js
        │  template.html
        ├─dist
        └─src                   
            ├─A                 
            │      A.js 
            └─B
                   B.js
2.  配置webpack
    
        const HtmlWebpackPlugin = require('html-webpack-plugin');  //引入插件
        
        entry: {                           //多入口使用对象形式配置，chunk名称为key值
                A: './src/pages/A/A.js',
                B: './src/pages/B/B.js',
        },
        output:{                   
                filename:'[name].bundle.js',  //[name]代表chunk名称
                path: path.resolve(__dirname, 'dist')
        },
            
        plugins:[
            new HtmlWebpackPlugin({
                chunks: ['A'],           //要引入的chunk
                filename:'A.html',       //生成的文件名
                template:'template.html',  //模板文件
            }),
            new HtmlWebpackPlugin({
                chunks:['B'],
                filename:'B.html',
                template:'template.html'
            }),
        ]
3.  编译后的目录结构
    
        │  package.json
        │  webpack.config.js
        │  template.html
        ├─dist
        |	A.bundle.js
        |	A.html
        │  	B.bundle.js
        │  	B.html
        └─src                   
            ├─A                 
            │      A.js 
            └─B
                   B.js

### 3.5 Webpack-dev-server ###

webpack-dev-server提供了一个简单的服务器，用于访问 webpack 构建好的静态文件，我们日常开发时可以使用它来调试前端代码。 webpack-dev-server将构建好的项目存在内存中。

DevServer 支持模块热替换, 可在不刷新整个网页的情况下实时预览页面。 原理是当一个源码发生变化时，只重新编译发生变化的模块，再用新输出的模块替换掉浏览器中对应的老模块。

3.5.1 devServer

1.  本地安装devServer
    
        npm i -D webpack-dev-server
2.  配置webpack：
    
        const webpack = require('webpack');
        
        plugins: [
                new webpack.HotModuleReplacementPlugin()  //启用 HMR (webpack 4)
        ],
        
        devServer:{
                hot: true,                 //开启模块热替换
                contentBase: './dist',     //将dist目录下的文件，作为额外可访问文件
                host: '0.0.0.0',           //DevServer 服务监听的地址，默认是localhost。
        当需要同个局域网可访问你的服务时，可设成0.0.0.0
                port: 3000,                //DevServer 服务监听的端口，默认8080
                https: false,              //是否使用HTTPS服务
                open: true                 //自动打开网页，地址是host:port
        },
        
        只有在通过 DevServer 去启动 Webpack 时配置文件里 devServer 才会生效，
        因为这些参数所对应的功能都是 DevServer 提供的，Webpack 本身并不认识 devServer 配置项。
3.  执行编译
    
        package.json 的 script字段添加如下：
        "start": "webpack-dev-server"
        
        执行 npm start
4.  [http://192.168.1.87:3000/A.html][http_192.168.1.87_3000_A.html]

3.5.2 open-browser-webpack-plugin

1.  本地安装
    
        npm i -D open-browser-webpack-plugin
2.  配置webpack
    
        const OpenBrowserPlugin = require('open-browser-webpack-plugin');
        
        plugins: [
            new OpenBrowserPlugin({ url: 'http://192.168.1.87:3000/A.html' })  //开启服务后，自动打开的地址
        ]
3.  执行 npm start后，会自动打开http://192.168.1.87:3000/A.html页。

### 3.6 加载样式 ###

webpack本身只认得JS文件，其他非JS文件需要用loader进行转换。

3.6.1 加载CSS

处理css文件，需要用到以下两个loader：

*  **css-loader** 负责解析 CSS 代码，主要是为了处理 CSS 中的依赖，例如 @import 和 url() 等引用外部文件的声明。
 *  **style-loader** 会将 css-loader 解析的结果转变成 JS 代码，运行时动态插入 style 标签来让 CSS 代码生效。

1.  本地安装loader
    
        npm i -D css-loader style-loader
2.  配置webpack
    
        module: {
                rules: [
                    {
                        test: /\.css$/,    //使用正则匹配所有需要使用此loader的文件
                        use: [             //先由css-loader处理后，在交给style-loader处理
                            'style-loader',
                            {
                                loader:'css-loader',
                                options:{           //传入css-loader的参数
                                    minimize:true,  //是否压缩css代码
                                    module:true     //是否使用css module
                                }
                            }
                        ]
                    },
                ]
            },

3.6.2 加载SCSS

先将SCSS转成CSS，后续处理同上。

1.  本地安装
    
        npm i -D sass-loader node-sass
2.  配置webpack
    
        module: {
                rules: [
                    {
                        test: /\.scss$/,    //使用正则匹配所有需要使用此loader的文件
                        use: ['style-loader','css-loader', 'sass-loader']  
                                //处理顺序:sass-loader->css-loader->style-loader
                    },
                ]
            },

### 3.7 加载静态资源 ###

3.7.1 加载图片&字体

file-loader, url-loader可用于处理图片，字体等静态资源。

url-loader封装了file-loader：

*  文件大小小于limit参数时，url-loader将会把文件转为DataURL。
 *  文件大小大于limit，url-loader会调用file-loader进行处理。

1.  本地安装loader
    
        npm i -D file-loader url-loader
2.  配置webpack
    
        module: {
            rules: [
                {
                        test: /\.(png|svg|jpg|gif)$/,
                        use: [{
                            loader: 'url-loader',
                            options: {
                                limit: 1024 * 30,         //30KB 以下的文件采用 url-loader
                                fallback: 'file-loader',  //否则采用 file-loader，默认值就是 file-loader
                                outputPath: 'images',     //图片输出路径，相对于output.path
                            }
                        }]
                    },
                    {
                        test: /\.(eot|ttf|woff|svg)$/,
                        use: [{
                            loader: 'url-loader',
                            options: {
                                limit: 1024 * 30,         //30KB 以下的文件采用 url-loader
                                fallback: 'file-loader',  //否则采用 file-loader，默认值就是 file-loader
                                outputPath: 'fonts',      //字体输出路径
                            }
                        }]
                    },
            ]
        },
3.  编译后:
    
     *  大于30KB的资源，用file-loader处理，复制到dist/images目录下。
     *  小于30KB的资源，和js一起打包，形成dataURL形式。

3.7.2 copy-webpack-plugin

将不需要webpack处理的静态资源（e.g. favicon），原样输出到指定目录下。

1.  本地安装
    
        npm i copy-webpack-plugin -D
2.  配置webpack
    
        const CopyWebpackPlugin = require('copy-webpack-plugin');
        
        plugins:[
            new CopyWebpackPlugin([{
                from: './src/assets/public',  // 将此目录下的文件
                to:'./public'                 // 输出到此目录，相对于output.path目录
            }])
        ]
3.  编译后 src/assets/public 下的文件将原封不动的输出到 dist/public 目录下。

### 3.8 第三方库 ###

通过ProvidePlugin引用某些模块作为应用运行时的变量，从而不必每次都用 `require` 或者 `import`, 是内置的插件。

1.  安装jquery
    
        npm i -D jquery
2.  配置webpack
    
        plugins:[
            new webpack.ProvidePlugin({
              $: 'jquery', 
            })
        ]
3.  在JS文件中就可直接使用jquery，不用导入。

### 3.9 其他 ###

3.9.1 clean-webpack-plugin

webpack打包的文件都放在dist文件夹下，但webpack无法追踪到哪些文件是实际项目中用到的。所以建议在每次构建前都清理下dist文件夹。

1.  本地安装插件
    
        npm i -D clean-webpack-plugin
2.  配置webpack
    
        const CleanWebpackPlugin=require('clean-webpack-plugin');
        
        new CleanWebpackPlugin(['dist'])

3.9.2 Webpack-merge

实际项目开发中，一般会有三份配置文件：

*  webpack.dev.js 开发环境：devserver配置，生成SourceMap
 *  webpack.prod.js 生产环境：压缩代码
 *  webpack.common.js 公共配置

可使用webpack-merge合并配置。

1.  本地安装
    
        npm i -D webpack-merge
2.  拆分webpack配置
    
        webpack.prod.js:
        
        const merge = require("webpack-merge");
        const common = require("./webpack.common.js");     //引入公共配置
        const CleanWebpackPlugin = require("clean-webpack-plugin");
        
        module.exports = merge(common, {                   //合并配置
                plugins: [
                    new CleanWebpackPlugin(["dist"])
                ],
        });
3.  修改package.json的script字段
    
        "build": "webpack --config webpack.prod.js",
        "start": "webpack-dev-server --config webpack.dev.js"

3.9.3 source map

React, ES6等经过webpack转换后，代码可读性非常差，不利于在浏览器中调试代码。可通过加载 Source Map 文件，在浏览器中调试源码。

各种source map的差异见：[https://github.com/webpack/webpack/tree/master/examples/source-map][https_github.com_webpack_webpack_tree_master_examples_source-map]

devtool: "cheap-module-eval-source-map"  //开发环境

## 4. 优化 ##

### 4.1 模式 ###

我们在日常的前端开发工作中，一般都会有开发&生产两套构建环境。

webpack 4.X新增用mode字段指定当前环境，并启用相应模式下的webpack内置的优化。

module.exports = {
      mode: 'production'
    };

<table> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>development (开发环境)</td> 
   <td>process.env.NODE_ENV =development<br> 并启用以下插件：<br> NamedChunksPlugin ， NamedModulesPlugin</td> 
  </tr> 
  <tr> 
   <td>production (生产环境)</td> 
   <td>process.env.NODE_ENV =production<br> 并启用以下插件：<br> FlagDependencyUsagePlugin ， FlagIncludedChunksPlugin , ModuleConcatenationPlugin , NoEmitOnErrorsPlugin , OccurrenceOrderPlugin , SideEffectsFlagPlugin , UglifyJsPlugin</td> 
  </tr> 
 </tbody> 
</table>

可通过optimization字段，手动配置或覆盖mode配置。

### 4.2 代码压缩 ###

4.2.1 压缩JS文件

将mode设置成production，在此模式下optimization.minimize默认为true, webpack 会自动调用UglifyjsWebpackPlugin压缩JS代码。

若不需要压缩，可将optimization.minimize设置为false。

1.  配置webpack.prod.js
    
        mode: "production"
    
        optimization: {
                // minimize:false，     //若不需要进行压缩，可使用此句禁用
                // minimizer: [         //用于指定使用的压缩插件或自定义UglifyjsWebpackPlugin插件配置，覆盖默认配置。
                //     new UglifyJsPlugin({ /* your config */ })
                // ]
        },

4.2.2 压缩CSS文件

3.7章节介绍了如何加载样式，但加载后的样式是写在JS文件中的。随着项目越来越大，js文件也会越来越大，所以，我们就需要对css文件进行分离并压缩。

1.  本地安装插件
    
        npm i -D mini-css-extract-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin
2.  配置webpack：分离css文件
    
        webpack.common.js:
        const MiniCssExtractPlugin = require("mini-css-extract-plugin");
        
        module.exports = {
          plugins: [
            new MiniCssExtractPlugin({
              filename: "[name].css",    // [name]为chunk名称
            })
          ],
          module: {
            rules: [
              {
                test: /\.(sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,   // style-loader改用MiniCssExtractPlugin
                    'css-loader',
                    'sass-loader',
                ],
              }
            ]
          }
        }
        
        注：在Webpack4上用extract-text-webpack-plugin会出错，可以安装beta版本extract-text-webpack-plugin@next。
3.  配置webpack：压缩css文件
    
        webpack.prod.js:
        const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); //用于压缩CSS代码
        const UglifyJsPlugin = require("uglifyjs-webpack-plugin");  //用于压缩JS代码
        
        optimization: {
                minimizer: [     
                    new UglifyJsPlugin({}),
                    new OptimizeCSSAssetsPlugin({})  //压缩css
                ]
            },

4.2.3 压缩HTML文件

HtmlWebpackPlugin支持压缩输出的HTML文件。

plugins:[
        new HtmlWebpackPlugin({
        	template:'src/index.html', 
        	minify:{                     //压缩输出
                collapseWhitespace:true   //折叠空白区域
                minifyCSS: true, 	// 压缩 HTML 中出现的 CSS 代码
            	minifyJS: true 		// 压缩 HTML 中出现的 JS 代码
        	}
        })
    ]

4.2.4 压缩图片

1.  本地安装
    
        npm i -D image-webpack-loader
2.  配置webpack
    
        {
            test: /\.(png|svg|jpg|gif)$/,
            use: [
                {
                    loader: 'url-loader',
                    options: {
                        limit: 1024 * 30,         
                        fallback: 'file-loader',  
                        outputPath: 'images',    
                    }
                },
            	'image-webpack-loader'        // 压缩图片
            ]
        },

### 4.3 Tree Sharing ###

Tree Shaking 可以用来剔除 JavaScript 中用不上的代码。

Tree Shaking要求：

*  必须遵循 ES6 的模块规范（即 import 和 export）。
 *  在项目 `package.json` 文件中，添加一个 “sideEffects” 属性。作用于引入重导出的模块。
 *  引入一个能够删除未引用代码(dead code)的压缩工具(minifier)（例如 `UglifyJSPlugin`）。

1.  新建util.js
    
        export funcA from './TESTA'
        export funcB from './TESTB'
        
        TESTA.js:
        import React from 'react';
        export default function funcA() {
          return <h1>I'm funcA</h1>;
        }
        console.log("funcAfuncAfuncA")   // 副作用代码
        
        TESTB.js:
        import React from 'react';
        export default function funcB() {
          return <h1>I'm funcB</h1>;
        }
        console.log("funcBfuncBfuncB")  // 副作用代码
2.  在A.js中引用util.funcA，则funcB就是用不上的代码。
    
        import {funcA} from '../util';
3.  修改babel-loader配置。
    
        presets: [ 
            [
                "env",
                {modules: false}  // 关闭Babel的模块转换功能，保留原本的ES6模块化语法
            ],
            "react"
        ]
4.  package.json添加sideEffects字段： 将文件标记为无副作用
    
        "sideEffects": ["*.css","*.scss"]  //避免样式文件被删除
        
        注：此字段是webpack4新增的。
5.  开启压缩，参照4.2.1
    
    执行编译后，A.bundle.js无funcB相关代码。

### 4.4 提取公共代码 ###

提取公共代码的原理：用户第一次访问页面后，页面公共代码的文件已经被浏览器缓存起来。用户切换到其它页面时，存放公共代码的文件就不会再重新加载，而是直接从缓存中获取。 加快了其他页面的访问速度，减少了网络传输流量。

3种拆分方案浏览器的加载情况：

*  未拆分代码：所有代码被打包到一个JS文件中，当修改了代码，浏览器就得重新加载所有代码。
 *  拆分公共代码：代码被打包成两个JS文件（公共代码 & 其余代码），修改其中一个文件的代码，浏览器只需要重新加载修改的代码文件。但第三方库的代码也属于公共代码，若修改了非第三方库的公共代码，那么浏览器也会重新加载不常变更的第三方库代码。
 *  拆分公共代码&第三方库：代码被打包成3个以上的JS文件。

mode=production时，webpack 4.X 会默认对代码进行拆分，拆分的规则是：

*  模块被重复引用，或者是来自`node_modules`中的模块。
 *  文件大于30kb。
 *  在按需加载时，请求数量小于等于5。
 *  在初始化加载时，请求数量小于等于3。

注：webpack 4.x 通过optimization.splitChunks配置, webpack 4.x之前可用CommonsChunkPlugin。

默认配置：

optimization: {
        splitChunks: {
          chunks: "async", //异步加载的模块
          minSize: 30000, //模块大于30k会被抽离到公共模块
          minChunks: 1, //被引用超过1次
          maxAsyncRequests: 5, //异步模块，一次最多只能被加载5个
          maxInitialRequests: 3, //入口模块最多只能加载3个
        },
      },
    }

拆分公共代码配置：

optimization: {
        splitChunks: {
          chunks: "all", // 所有的 chunks 代码公共的部分分离出来成为一个单独的文件
        },
      },
    }

拆分公共代码&第三方库配置:

*  根据所使用的技术栈，找出所有页面都需要用到的基础库。如react、react-dom 等库，把它们提取到一个单独vendor.js文件。
 *  在剔除了各个页面中被 vendor.js 包含的部分代码外，再找出所有页面都依赖的公共部分的代码提取出来放到 common.js中去。
 *  再为每个页面都生成一个单独的文件，这个文件中不再包含 vendor.js 和 common.js中包含的部分，而只包含各个页面单独需要的部分代码。

optimization: {
        splitChunks: {
                cacheGroups: {           //缓存组
                    commons: {           //提取入口文件之间的公共代码
                        chunks: 'all',   //块的范围，有三个可选值：initial、async、all，默认为all
                        minChunks: 2,    //被引用次数
                        minSize: 0,      //文件大小
                        name: "common"   //拆分出来块的名字
                    },
                    vendor: {
                        chunks: "all",
                        test: /node_modules/,//控制哪些模块被这个缓存组匹配到
                        name: "vendor",
                        priority: 10,
                    },
                },
            }
    }

new HtmlWebpackPlugin({
        chunks: ['A','common','vendor'],           //引入拆分出来的chunk
        filename:'A.html',      
        template:'template.html', 
        minify:{                 
        	collapseWhitespace:true  
        }
    }),

编译完成后dist目录结构如下：

│  A.bundle.js
    │  A.css
    │  A.html
    │  B.bundle.js
    │  B.css
    │  B.html
    │  common.bundle.js           //A和B之间的公共代码
    │  vendor.bundle.js           //node_modules下的第三方依赖代码
    ├─images
    │      230280f0ff880c8273b99fdae150dc96.png
    └─public
            ico.png

### 4.5 优化loader配置 ###

使用 Loader 时可以通过 test 、 include、 exclude 三个配置项来命中 Loader 要应用规则的文件。 为了尽可能少的让文件被 Loader 处理，可以通过 include && exclude 去命中/排除文件。

示例配置：

babel-loader:
    exclude: path.resolve(__dirname, 'node_modules')
    
    url-loader：
    include: path.resolve(__dirname, 'src/assets')

### 4.6 Resolve ###

Webpack 在启动后会从配置的入口模块出发找出所有依赖的模块，Resolve 配置 Webpack 如何寻找模块所对应的文件。

模块引入方式：

import * as m from './index.css'   // 相对路径
    import React from 'react'         // 模块名

*  解析相对路径
    
    1.  查找相对当前模块的路径下是否有对应文件或文件夹
    2.  是文件则直接加载
    3.  是文件夹则继续查找文件夹下的 package.json 文件
    4.  有 package.json 文件则按照文件中 browser/module/main 字段的文件名来查找文件 (配置项：resolve.mainFields )
    5.  无 package.json 或者无 browser/module/main字段则查找 index.js 文件 (配置项：resolve.mainFiles)
 *  解析模块名
    
    1.  查找当前文件目录下，父级目录及以上目录下的 node\_modules 文件夹，看是否有对应名称的模块 (配置项：resolve.modules)

4.6.1 resolve.modules

resolve.modules 用于配置 Webpack 去哪些目录下寻找第三方模块。

默认值是 \[‘node\_modules’\]，作用：

*  先去当前目录下的node\_modules目录下查找第三方模块。
 *  如果没找到，就去上级目录的node\_modules目录下查找。
 *  还是没找到，再去上级的node\_modules目录下查找。
 *  直到根目录。

通常安装的第三方模块都放在项目根目录下的 node\_modules 目录下，就没有必要按照默认的方式去一层层的寻找，可以指明存放第三方模块的绝对路径，以减少寻找。

配置如下：

module.exports = {
      resolve: {
        // 使用绝对路径指明第三方模块存放的位置，以减少搜索步骤
        modules: [path.resolve(__dirname, 'node_modules')]
      },
    };

4.6.2 resolve.extensions

resolve.extensions 用于配置在尝试过程中用到的后缀列表，默认是：

extensions: ['.js', '.json']

如果这个列表越长，或者正确的后缀在越后面，就会造成尝试的次数越多。

建议：

*  后缀尝试列表要尽可能的小，不要把项目中不可能存在的情况写到后缀尝试列表中。
 *  频率出现最高的文件后缀要优先放在最前面，以做到尽快的退出寻找过程。
 *  在源码中写导入语句时，要尽可能的带上后缀，从而可以避免寻找过程。例如在你确定的情况下把 `require('./data')` 写成 `require('./data.json')`。