前端框架面试之 webpack、babel 和 webpack 的面试真题

待我称王封你为后i 2023-02-19 10:25 11阅读 0赞

#### 一、webpack 和 babel ####

1.  对于 `webpack`，分为基本配置、高级配置、优化打包效率、优化产出代码、构建流程概述和 `babel`。
2.  对于 `webpack` 的基本配置，拆分配置和 `merge`，启动本地服务，处理 `ES6`，处理样式，处理图片和模块化，代码如下所示：

*  **webpack.common.js**

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = { 
        entry: path.join(srcPath, 'index'),
        module: { 
            rules: [
                { 
                    test: /\.js$/,
                    loader: ['babel-loader'],
                    include: srcPath,
                    exclude: /node_modules/
                },
                // { 
                // test: /\.vue$/,
                // loader: ['vue-loader'],
                // include: srcPath
                // },
                // { 
                // test: /\.css$/,
                // // loader 的执行顺序是：从后往前（知识点）
                // loader: ['style-loader', 'css-loader']
                // },
                { 
                    test: /\.css$/,
                    // loader 的执行顺序是：从后往前
                    loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
                },
                { 
                    test: /\.less$/,
                    // 增加 'less-loader' ，注意顺序
                    loader: ['style-loader', 'css-loader', 'less-loader']
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: path.join(srcPath, 'index.html'),
                filename: 'index.html'
            })
        ]
    }

*  **webpack.dev.js**

const path = require('path')
    const webpack = require('webpack')
    const webpackCommonConf = require('./webpack.common.js')
    const {  smart } = require('webpack-merge')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = smart(webpackCommonConf, { 
        mode: 'development',
        module: { 
            rules: [
                // 直接引入图片 url
                { 
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: 'file-loader'
                }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({ 
                // window.ENV = 'development'
                ENV: JSON.stringify('development')
            })
        ],
        devServer: { 
            port: 8080,
            progress: true,  // 显示打包的进度条
            contentBase: distPath,  // 根目录
            open: true,  // 自动打开浏览器
            compress: true,  // 启动 gzip 压缩
    
            // 设置代理
            proxy: { 
                // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
                '/api': 'http://localhost:3000',
    
                // 将本地 /api2/xxx 代理到 localhost:3000/xxx
                '/api2': { 
                    target: 'http://localhost:3000',
                    pathRewrite: { 
                        '/api2': ''
                    }
                }
            }
        }
    })

*  **webpack.prod.js**

const path = require('path')
    const webpack = require('webpack')
    const {  CleanWebpackPlugin } = require('clean-webpack-plugin')
    const webpackCommonConf = require('./webpack.common.js')
    const {  smart } = require('webpack-merge')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = smart(webpackCommonConf, { 
        mode: 'production',
        output: { 
            filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
            path: distPath,
            // publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
        },
        module: { 
            rules: [
                // 图片 - 考虑 base64 编码的情况
                { 
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: { 
                        loader: 'url-loader',
                        options: { 
                            // 小于 5kb 的图片用 base64 格式产出
                            // 否则，依然延用 file-loader 的形式，产出 url 格式
                            limit: 5 * 1024,
    
                            // 打包到 img 目录下
                            outputPath: '/img1/',
    
                            // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                            // publicPath: 'http://cdn.abc.com'
                        }
                    }
                },
            ]
        },
        plugins: [
            new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
            new webpack.DefinePlugin({ 
                // window.ENV = 'production'
                ENV: JSON.stringify('production')
            })
        ]
    })

*  **path.js**

const path = require('path')
    
    const srcPath = path.join(__dirname, '..', 'src')
    const distPath = path.join(__dirname, '..', 'dist')
    
    module.exports = { 
        srcPath,
        distPath
    }

1.  对于 `webpack` 的高级配置中的多入口，代码如下所示：

*  **webpack.common.js**

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = { 
        entry: { 
            index: path.join(srcPath, 'index.js'),
            other: path.join(srcPath, 'other.js')
        },
        module: { 
            rules: [
                { 
                    test: /\.js$/,
                    loader: ['babel-loader'],
                    include: srcPath,
                    exclude: /node_modules/
                },
                // { 
                // test: /\.css$/,
                // // loader 的执行顺序是：从后往前
                // loader: ['style-loader', 'css-loader']
                // },
                { 
                    test: /\.css$/,
                    // loader 的执行顺序是：从后往前
                    loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
                },
                { 
                    test: /\.less$/,
                    // 增加 'less-loader' ，注意顺序
                    loader: ['style-loader', 'css-loader', 'less-loader']
                }
            ]
        },
        plugins: [
            // new HtmlWebpackPlugin({ 
            // template: path.join(srcPath, 'index.html'),
            // filename: 'index.html'
            // })
    
            // 多入口 - 生成 index.html
            new HtmlWebpackPlugin({ 
                template: path.join(srcPath, 'index.html'),
                filename: 'index.html',
                // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
                chunks: ['index']  // 只引用 index.js
            }),
            // 多入口 - 生成 other.html
            new HtmlWebpackPlugin({ 
                template: path.join(srcPath, 'other.html'),
                filename: 'other.html',
                chunks: ['other']  // 只引用 other.js
            })
        ]
    }

*  **webpack.dev.js**

const path = require('path')
    const webpack = require('webpack')
    const webpackCommonConf = require('./webpack.common.js')
    const {  smart } = require('webpack-merge')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = smart(webpackCommonConf, { 
        mode: 'development',
        module: { 
            rules: [
                // 直接引入图片 url
                { 
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: 'file-loader'
                }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({ 
                // window.ENV = 'production'
                ENV: JSON.stringify('development')
            })
        ],
        devServer: { 
            port: 8080,
            progress: true,  // 显示打包的进度条
            contentBase: distPath,  // 根目录
            open: true,  // 自动打开浏览器
            compress: true,  // 启动 gzip 压缩
    
            // 设置代理
            proxy: { 
                // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
                '/api': 'http://localhost:3000',
    
                // 将本地 /api2/xxx 代理到 localhost:3000/xxx
                '/api2': { 
                    target: 'http://localhost:3000',
                    pathRewrite: { 
                        '/api2': ''
                    }
                }
            }
        }
    })

*  **webpack.prod.js**

const path = require('path')
    const webpack = require('webpack')
    const {  CleanWebpackPlugin } = require('clean-webpack-plugin')
    const webpackCommonConf = require('./webpack.common.js')
    const {  smart } = require('webpack-merge')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = smart(webpackCommonConf, { 
        mode: 'production',
        output: { 
            // filename: 'bundle.[contentHash:8].js', // 打包代码时，加上 hash 戳
            filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
            path: distPath,
            // publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
        },
        module: { 
            rules: [
                // 图片 - 考虑 base64 编码的情况
                { 
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: { 
                        loader: 'url-loader',
                        options: { 
                            // 小于 5kb 的图片用 base64 格式产出
                            // 否则，依然延用 file-loader 的形式，产出 url 格式
                            limit: 5 * 1024,
    
                            // 打包到 img 目录下
                            outputPath: '/img1/',
    
                            // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                            // publicPath: 'http://cdn.abc.com'
                        }
                    }
                },
            ]
        },
        plugins: [
            new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
            new webpack.DefinePlugin({ 
                // window.ENV = 'production'
                ENV: JSON.stringify('production')
            })
        ]
    })

*  **paths.js**

1.  对于 `webpack` 的高级配置中的抽离 `CSS` 文件，代码如下所示：

*  **webpack.common.js**

*  **webpack.dev.js**

const path = require('path')
    const webpack = require('webpack')
    const webpackCommonConf = require('./webpack.common.js')
    const {  smart } = require('webpack-merge')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = smart(webpackCommonConf, { 
        mode: 'development',
        module: { 
            rules: [
                // 直接引入图片 url
                { 
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: 'file-loader'
                },
                // { 
                // test: /\.css$/,
                // // loader 的执行顺序是：从后往前
                // loader: ['style-loader', 'css-loader']
                // },
                { 
                    test: /\.css$/,
                    // loader 的执行顺序是：从后往前
                    loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
                },
                { 
                    test: /\.less$/,
                    // 增加 'less-loader' ，注意顺序
                    loader: ['style-loader', 'css-loader', 'less-loader']
                }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({ 
                // window.ENV = 'production'
                ENV: JSON.stringify('development')
            })
        ],
        devServer: { 
            port: 8080,
            progress: true,  // 显示打包的进度条
            contentBase: distPath,  // 根目录
            open: true,  // 自动打开浏览器
            compress: true,  // 启动 gzip 压缩
    
            // 设置代理
            proxy: { 
                // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
                '/api': 'http://localhost:3000',
    
                // 将本地 /api2/xxx 代理到 localhost:3000/xxx
                '/api2': { 
                    target: 'http://localhost:3000',
                    pathRewrite: { 
                        '/api2': ''
                    }
                }
            }
        }
    })

*  **webpack.prod.js**

*  **paths.js**

1.  对于 `webpack` 的高级配置中的抽离公共代码和第三方代码，代码如下所示：

*  **webpack.common.js**

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = { 
        entry: { 
            index: path.join(srcPath, 'index.js'),
            other: path.join(srcPath, 'other.js')
        },
        module: { 
            rules: [
                { 
                    test: /\.js$/,
                    loader: ['babel-loader'],
                    include: srcPath,
                    exclude: /node_modules/
                }
            ]
        },
        plugins: [
            // new HtmlWebpackPlugin({ 
            // template: path.join(srcPath, 'index.html'),
            // filename: 'index.html'
            // })
    
            // 多入口 - 生成 index.html
            new HtmlWebpackPlugin({ 
                template: path.join(srcPath, 'index.html'),
                filename: 'index.html',
                // chunks 表示该页面要引用哪些 chunk （即上面的 index 和 other），默认全部引用
                chunks: ['index', 'vendor', 'common']  // 要考虑代码分割
            }),
            // 多入口 - 生成 other.html
            new HtmlWebpackPlugin({ 
                template: path.join(srcPath, 'other.html'),
                filename: 'other.html',
                chunks: ['other', 'common']  // 考虑代码分割
            })
        ]
    }

*  **webpack.dev.js**

const path = require('path')
    const webpack = require('webpack')
    const webpackCommonConf = require('./webpack.common.js')
    const {  smart } = require('webpack-merge')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = smart(webpackCommonConf, { 
        mode: 'development',
        module: { 
            rules: [
                // 直接引入图片 url
                { 
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: 'file-loader'
                },
                // { 
                // test: /\.css$/,
                // // loader 的执行顺序是：从后往前
                // loader: ['style-loader', 'css-loader']
                // },
                { 
                    test: /\.css$/,
                    // loader 的执行顺序是：从后往前
                    loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
                },
                { 
                    test: /\.less$/,
                    // 增加 'less-loader' ，注意顺序
                    loader: ['style-loader', 'css-loader', 'less-loader']
                }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({ 
                // window.ENV = 'production'
                ENV: JSON.stringify('development')
            })
        ],
        devServer: { 
            port: 8080,
            progress: true,  // 显示打包的进度条
            contentBase: distPath,  // 根目录
            open: true,  // 自动打开浏览器
            compress: true,  // 启动 gzip 压缩
    
            // 设置代理
            proxy: { 
                // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
                '/api': 'http://localhost:3000',
    
                // 将本地 /api2/xxx 代理到 localhost:3000/xxx
                '/api2': { 
                    target: 'http://localhost:3000',
                    pathRewrite: { 
                        '/api2': ''
                    }
                }
            }
        }
    })

*  **webpack.prod.js**

*  **paths.js**

1.  对于 `webpack` 的高级配置中，除了上面所提到的多入口、抽离 `CSS` 文件和 抽离公共代码，还有异步加载 `JS`、懒加载、处理 `JSX` 和处理 `Vue`，核心配置也是匹配对应的后缀文件，以及 `loader`，代码如下所示：

const path = require('path')
    const HtmlWebpackPlugin = require('html-webpack-plugin')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = { 
        entry: path.join(srcPath, 'index'),
        module: { 
            rules: [
                { 
                    test: /\.js$/,
                    loader: ['babel-loader'],
                    include: srcPath,
                    exclude: /node_modules/
                },
                { 
                    test: /\.vue$/,
                    loader: ['vue-loader'],
                    include: srcPath
                },
                // { 
                // test: /\.css$/,
                // // loader 的执行顺序是：从后往前（知识点）
                // loader: ['style-loader', 'css-loader']
                // },
                { 
                    test: /\.css$/,
                    // loader 的执行顺序是：从后往前
                    loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
                },
                { 
                    test: /\.less$/,
                    // 增加 'less-loader' ，注意顺序
                    loader: ['style-loader', 'css-loader', 'less-loader']
                }
            ]
        },
        plugins: [
            new HtmlWebpackPlugin({ 
                template: path.join(srcPath, 'index.html'),
                filename: 'index.html'
            })
        ]
    }

1.  `module、chunk、bundle` 的区别是什么，答案如下所示：

*  `module` 是各个源码文件，`webpack` 中一切皆模块
 *  `chunk` 是多模块合并成的，如 `entery、import()、splitChunk` 等等
 *  `bundle` 是最终输出的文件

1.  对于 `webpack` 性能优化，优化构建速度，如下所示：

*  优化 `babel-loader`。开启缓存，明确范围，排除范围，`include` 和 `exclude` 两者选一个即可
 *  `IgnorePlugin`
 *  `noParse`
 *  `happyPack` 多进程打包。`JS` 单线程，开启多进程打包，提高构建速度，特别是多核 `CPU`
 *  `ParallelUglifyPlugin` 多进程压缩 `JS`。`webpack` 内置 `Uglify` 工具压缩 `JS`，`JS` 单线程，开启多进程压缩更快，和 `happyPack` 原理相同
 *  自动刷新。开启监听，监听配置，`webpack-dev-server` 会自动开启刷新浏览器
 *  热更新。自动刷新会使得整个网页全部刷新，速度较慢，状态会丢失。但是热更新，新代码生效，网页不刷新，状态不丢失
 *  `DllPlugin` 动态链接库插件。前端框架如 `React、Vue`，体积大，构建慢，较稳定，不常升级版本，同一版本只构建一次即可，不用每次都重新构建。`webpack` 已内置 `DllPlugin` 支持，`DllPlugin` 打包出 `dll` 文件，`DllReferencePlugin` 使用 `dll` 文件

1.  对于开启多进程，项目较大，打包较慢，开启多进程能提高速度，项目较小，打包很快，开启多进程会减低速度，进行开销，按需使用。
2.  对于 `webpack` 优化构建速度，可用于生产环境的，优化 `babel-loader、 IgnorePlugin、noParse、happyPack、 ParallelUglifyPlugin`。对于 `webpack` 优化构建速度，不用于生产环境的，自动刷新、热更新、`DllPlugin`。
3.  对于 `webpack` 性能优化，产出代码，如下所示：

*  体积更小
 *  合理分包，不重复加载
 *  速度更快，内存使用更少
 *  小图片 `base64` 编码
 *  `bundle` 加 `hash`
 *  懒加载
 *  提取公共代码
 *  `IgnorePlugin`
 *  使用 `CDN` 加速
 *  使用 `production`
 *  `Scope Hosting`

1.  对于使用 `production`，如下所示：

*  自动开启代码压缩
 *  `Vue、React` 等会自动删掉调试代码，如开发环境的 `warning`
 *  启动 `Tree-Shaking`

1.  对于 `ES6 Module` 和 `Commonjs` 区别，如下所示：

*  `ES6 Module` 静态引入，编译时引入
 *  `Commonjs` 动态引入，执行时引入
 *  只有 `ES6 Module` 才能静态分析，实现 `Tree-Shaking`

1.  对于 `Scope Hosting`，如下所示：

*  代码体积更小
 *  创建函数作用域更少
 *  代码可读性更好
 *  针对 `Npm` 中的第三方模块优先采用 `jsnext:main` 中指向的 `ES6` 模块化语法的文件，开启 `Scope Hosting`

1.  对于 `webpack` 性能优化，优化构建速度，代码如下所示：

*  **webpack.common.js**

*  **webpack.dev.js**

const path = require('path')
    const webpack = require('webpack')
    const webpackCommonConf = require('./webpack.common.js')
    const {  smart } = require('webpack-merge')
    const {  srcPath, distPath } = require('./paths')
    const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');
    
    module.exports = smart(webpackCommonConf, { 
        mode: 'development',
        entry: { 
            // index: path.join(srcPath, 'index.js'),
            index: [
                'webpack-dev-server/client?http://localhost:8080/',
                'webpack/hot/dev-server',
                path.join(srcPath, 'index.js')
            ],
            other: path.join(srcPath, 'other.js')
        },
        module: { 
            rules: [
                { 
                    test: /\.js$/,
                    loader: ['babel-loader?cacheDirectory'],
                    include: srcPath,
                    // exclude: /node_modules/
                },
                // 直接引入图片 url
                { 
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: 'file-loader'
                },
                // { 
                // test: /\.css$/,
                // // loader 的执行顺序是：从后往前
                // loader: ['style-loader', 'css-loader']
                // },
                { 
                    test: /\.css$/,
                    // loader 的执行顺序是：从后往前
                    loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
                },
                { 
                    test: /\.less$/,
                    // 增加 'less-loader' ，注意顺序
                    loader: ['style-loader', 'css-loader', 'less-loader']
                }
            ]
        },
        plugins: [
            new webpack.DefinePlugin({ 
                // window.ENV = 'production'
                ENV: JSON.stringify('development')
            }),
            new HotModuleReplacementPlugin()
        ],
        devServer: { 
            port: 8080,
            progress: true,  // 显示打包的进度条
            contentBase: distPath,  // 根目录
            open: true,  // 自动打开浏览器
            compress: true,  // 启动 gzip 压缩
    
            hot: true,
    
            // 设置代理
            proxy: { 
                // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
                '/api': 'http://localhost:3000',
    
                // 将本地 /api2/xxx 代理到 localhost:3000/xxx
                '/api2': { 
                    target: 'http://localhost:3000',
                    pathRewrite: { 
                        '/api2': ''
                    }
                }
            }
        },
        // watch: true, // 开启监听，默认为 false
        // watchOptions: { 
        // ignored: /node_modules/, // 忽略哪些
        // // 监听到变化发生后会等300ms再去执行动作，防止文件更新太快导致重新编译频率太高
        // // 默认为 300ms
        // aggregateTimeout: 300,
        // // 判断文件是否发生变化是通过不停的去询问系统指定文件有没有变化实现的
        // // 默认每隔1000毫秒询问一次
        // poll: 1000
        // }
    })

*  **webpack.prod.js**

const path = require('path')
    const webpack = require('webpack')
    const {  smart } = require('webpack-merge')
    const {  CleanWebpackPlugin } = require('clean-webpack-plugin')
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
    const TerserJSPlugin = require('terser-webpack-plugin')
    const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
    const HappyPack = require('happypack')
    const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
    const webpackCommonConf = require('./webpack.common.js')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = smart(webpackCommonConf, { 
        mode: 'production',
        output: { 
            // filename: 'bundle.[contentHash:8].js', // 打包代码时，加上 hash 戳
            filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
            path: distPath,
            // publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
        },
        module: { 
            rules: [
                // js
                { 
                    test: /\.js$/,
                    // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
                    use: ['happypack/loader?id=babel'],
                    include: srcPath,
                    // exclude: /node_modules/
                },
                // 图片 - 考虑 base64 编码的情况
                { 
                    test: /\.(png|jpg|jpeg|gif)$/,
                    use: { 
                        loader: 'url-loader',
                        options: { 
                            // 小于 5kb 的图片用 base64 格式产出
                            // 否则，依然延用 file-loader 的形式，产出 url 格式
                            limit: 5 * 1024,
    
                            // 打包到 img 目录下
                            outputPath: '/img1/',
    
                            // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                            // publicPath: 'http://cdn.abc.com'
                        }
                    }
                },
                // 抽离 css
                { 
                    test: /\.css$/,
                    loader: [
                        MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                        'css-loader',
                        'postcss-loader'
                    ]
                },
                // 抽离 less
                { 
                    test: /\.less$/,
                    loader: [
                        MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                        'css-loader',
                        'less-loader',
                        'postcss-loader'
                    ]
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
            new webpack.DefinePlugin({ 
                // window.ENV = 'production'
                ENV: JSON.stringify('production')
            }),
    
            // 抽离 css 文件
            new MiniCssExtractPlugin({ 
                filename: 'css/main.[contentHash:8].css'
            }),
    
            // 忽略 moment 下的 /locale 目录
            new webpack.IgnorePlugin(/\.\/locale/, /moment/),
    
            // happyPack 开启多进程打包
            new HappyPack({ 
                // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
                id: 'babel',
                // 如何处理 .js 文件，用法和 Loader 配置中一样
                loaders: ['babel-loader?cacheDirectory']
            }),
    
            // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
            new ParallelUglifyPlugin({ 
                // 传递给 UglifyJS 的参数
                // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
                uglifyJS: { 
                    output: { 
                        beautify: false, // 最紧凑的输出
                        comments: false, // 删除所有的注释
                    },
                    compress: { 
                        // 删除所有的 `console` 语句，可以兼容ie浏览器
                        drop_console: true,
                        // 内嵌定义了但是只用到一次的变量
                        collapse_vars: true,
                        // 提取出出现多次但是没有定义成变量去引用的静态值
                        reduce_vars: true,
                    }
                }
            })
        ],
    
        optimization: { 
            // 压缩 css
            minimizer: [new TerserJSPlugin({ }), new OptimizeCSSAssetsPlugin({ })],
    
            // 分割代码块
            splitChunks: { 
                chunks: 'all',
                /** * initial 入口chunk，对于异步导入的文件不处理 async 异步chunk，只对异步导入的文件处理 all 全部chunk */
    
                // 缓存分组
                cacheGroups: { 
                    // 第三方模块
                    vendor: { 
                        name: 'vendor', // chunk 名称
                        priority: 1, // 权限更高，优先抽离，重要！！！
                        test: /node_modules/,
                        minSize: 0,  // 大小限制
                        minChunks: 1  // 最少复用过几次
                    },
    
                    // 公共的模块
                    common: { 
                        name: 'common', // chunk 名称
                        priority: 0, // 优先级
                        minSize: 0,  // 公共模块的大小限制
                        minChunks: 2  // 公共模块最少复用过几次
                    }
                }
            }
        }
    })

*  **paths.js**

1.  对于 `webpack` 性能优化，优化构建速度，`DllPlugin` 动态链接库插件，代码如下所示：

*  **webpack.common.js**

*  **webpack.dev.js**

const path = require('path')
    const webpack = require('webpack')
    const {  smart } = require('webpack-merge')
    const webpackCommonConf = require('./webpack.common.js')
    const {  srcPath, distPath } = require('./paths')
    
    // 第一，引入 DllReferencePlugin
    const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');
    
    module.exports = smart(webpackCommonConf, { 
        mode: 'development',
        module: { 
            rules: [
                { 
                    test: /\.js$/,
                    loader: ['babel-loader'],
                    include: srcPath,
                    exclude: /node_modules/ // 第二，不要再转换 node_modules 的代码
                },
            ]
        },
        plugins: [
            new webpack.DefinePlugin({ 
                // window.ENV = 'production'
                ENV: JSON.stringify('development')
            }),
            // 第三，告诉 Webpack 使用了哪些动态链接库
            new DllReferencePlugin({ 
                // 描述 react 动态链接库的文件内容
                manifest: require(path.join(distPath, 'react.manifest.json')),
            }),
        ],
        devServer: { 
            port: 8080,
            progress: true,  // 显示打包的进度条
            contentBase: distPath,  // 根目录
            open: true,  // 自动打开浏览器
            compress: true,  // 启动 gzip 压缩
    
            // 设置代理
            proxy: { 
                // 将本地 /api/xxx 代理到 localhost:3000/api/xxx
                '/api': 'http://localhost:3000',
    
                // 将本地 /api2/xxx 代理到 localhost:3000/xxx
                '/api2': { 
                    target: 'http://localhost:3000',
                    pathRewrite: { 
                        '/api2': ''
                    }
                }
            }
        }
    })

*  **webpack.prod.js**

const path = require('path')
    const webpack = require('webpack')
    const webpackCommonConf = require('./webpack.common.js')
    const {  smart } = require('webpack-merge')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = smart(webpackCommonConf, { 
        mode: 'production',
        output: { 
            filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
            path: distPath,
            // publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
        },
        plugins: [
            new webpack.DefinePlugin({ 
                // window.ENV = 'production'
                ENV: JSON.stringify('production')
            })
        ]
    })

*  **paths.js**

*  **webpack.dll.js**

const path = require('path')
    const DllPlugin = require('webpack/lib/DllPlugin')
    const {  srcPath, distPath } = require('./paths')
    
    module.exports = { 
      mode: 'development',
      // JS 执行入口文件
      entry: { 
        // 把 React 相关模块的放到一个单独的动态链接库
        react: ['react', 'react-dom']
      },
      output: { 
        // 输出的动态链接库的文件名称，[name] 代表当前动态链接库的名称，
        // 也就是 entry 中配置的 react 和 polyfill
        filename: '[name].dll.js',
        // 输出的文件都放到 dist 目录下
        path: distPath,
        // 存放动态链接库的全局变量名称，例如对应 react 来说就是 _dll_react
        // 之所以在前面加上 _dll_ 是为了防止全局变量冲突
        library: '_dll_[name]',
      },
      plugins: [
        // 接入 DllPlugin
        new DllPlugin({ 
          // 动态链接库的全局变量名称，需要和 output.library 中保持一致
          // 该字段的值也就是输出的 manifest.json 文件 中 name 字段的值
          // 例如 react.manifest.json 中就有 "name": "_dll_react"
          name: '_dll_[name]',
          // 描述动态链接库的 manifest.json 文件输出时的文件名称
          path: path.join(distPath, '[name].manifest.json'),
        }),
      ],
    }

1.  对于 `babel`，分为环境配置、基本配置`babel-polyfill、babel-runtime`，如下所示：

*  对于基本配置，环境搭建，`.babelrc` 配置，`presets` 和 `plugins`
 *  `Polyfill`，`core-js` 和 `regenerator，babel-polyfill` 即两者的结合。但是在 `Babel 7.4` 之后就弃用 `babel-polyfill`，推荐直接使用 `core-js` 和 `regenerator`，但是面试仍然会考察 `babel-polyfill`
 *  `babel-polyfill` 按需引入，文件较大，只有一部分功能，无需全部引入，配置按需引入
 *  `babel-polyfill` 存在的问题，会污染全局环境。如果做一个独立的 `web` 系统，则无碍。如果做一个第三方 `lib`，则会有问题，可以使用 `babel-runtime`

1.  对于 `babel` 的相关代码，如下所示：

*  **package.json**

{ 
      "name": "09-babel-demo",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC",
      "devDependencies": { 
        "@babel/cli": "^7.7.5",
        "@babel/core": "^7.7.5",
        "@babel/plugin-transform-runtime": "^7.7.5",
        "@babel/preset-env": "^7.7.5"
      },
      "dependencies": { 
        "@babel/polyfill": "^7.7.0",
        "@babel/runtime": "^7.7.5"
      }
    }

*  **.babelrc**

{ 
        "presets": [
            [
                "@babel/preset-env",
                { 
                    "useBuiltIns": "usage",
                    "corejs": 3
                }
            ]
        ],
        "plugins": [
            [
                "@babel/plugin-transform-runtime",
                { 
                    "absoluteRuntime": false,
                    "corejs": 3,
                    "helpers": true,
                    "regenerator": true,
                    "useESModules": false
                }
            ]
        ]
    }

*  **index.js**

const sum = (a, b) => a + b
    
    // 新的 API
    Promise.resolve(100).then(data => data);
    
    // 新的 API
    [10, 20, 30].includes(20)
    
    // 语法，符合 ES5 语法规范
    // 不处理模块化（webpack）
    
    // 污染全局环境
    // window.Promise1 = function() {}
    // Array.prototype.includes1 = function () {}
    
    // 使用方
    // window.Promise = 'abc'
    // Array.prototype.includes = 100

#### 二、webpack 的面试题 ####

1.  前端为何要进行打包和构建，答案如下所示：

*  体积更小，`Tree-shaking`、压缩和合并，加载更快
 *  编译高级语言或语法，`TS`、`ES6+`、模块化、`scss`
 *  兼容性和错误检查，`Polyfill、postcss、eslint`
 *  统一、高效的开发环境
 *  统一的构建流程和产出标准
 *  集成公司构建规范，提测、上线等

1.  `module、chunk、bundle` 的区别，答案如下所示：

*  `module` 是各个源码文件，`webpack` 中一切皆模块
 *  `chunk` 是多模块合并成的，如 `entery、import()、splitChunk` 等等
 *  `bundle` 是最终输出的文件

1.  `loader` 和 `plugin` 的区别，答案如下所示：

*  `loader` 模块转换器，如 `less -> css`
 *  `plugin` 扩展插件，如 `HtmlWebpackPlugin`

1.  `babel` 和 `webpack` 的区别，答案如下所示：

*  `babel` 是 `JS` 新语法编译工具，不关心模块化
 *  `webpack` 是打包构建工具，是多个 `loader、plugin` 的集合

1.  如何产出一个 `lib`，答案如下所示：

*  参考 `webpack.dll.js`
 *  `output.library`
 *  `lib` 的文件名，输出 `lib` 到 `dist` 目录下，`lib` 的全局变量名

1.  `babel-polyfill` 和 `babel-runtime` 的区别，答案如下所示：

*  `babel-polyfill` 会污染全局
 *  `babel-runtime` 不会污染全局
 *  产出第三方 `lib` 要用 `babel-runtime`

1.  `webpack` 如何实现懒加载，答案如下所示：

*  `import()`
 *  结合 `Vue、React` 异步组件
 *  结合 `Vue-router、React-router` 异步加载路由