webpack & babel

1 概述

• 前端打包构建的不二选择
• 重点在使用和配置，原理并不高优

面试题：

• 前端代码为何要进行构建和打包
• module chunk bundle分别是什么意思，有何区别
• loader 和plugin的区别
• webpack如何实现懒加载
• webpack常见性能优化
• babel-runtime 和bable-polyfill的区别

内容：

• 基本配置
• 高级配置
• 优化打包效率
• 优化产出代码
• 构建流程概述
• babel

思维导图：

2 webpack5

• webpack5主要是内部效率的优化
• 对比webpack4，没有太多使用上的改动

3 webpack基本配置

3.1拆分配置

配置分为common，dev，prod三个部分，在dev中使用merge引入common,prod同理

3.2启动本地服务

• 跨域请求其他端口：通过proxy代理

   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': ''
               }
           }
       }
   }

3.3处理ES6 （变成ES5,兼容浏览器）

        {
              test: /\.js$/,
              loader: ['babel-loader'],
              include: srcPath,
              exclude: /node_modules/
          },

3.4处理样式

            {
                test: /\.css$/,
                // loader 的执行顺序是：从后往前
                loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss，兼容性
            },
            {
                test: /\.less$/,
                // 增加 'less-loader' ，注意顺序
                loader: ['style-loader', 'css-loader', 'less-loader']
            }

3.5处理图片

//dev
        rules: [
            // 直接引入图片 url
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: 'file-loader'
            }
        ]
//prod
        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'
                    }
                }
            },
        ]

3.6模块化

4 webpack高级配置

• 基本配置只能做demo，不能做线上项目

4.1多入口

    entry: {
        index: path.join(srcPath, 'index.js'),
        other: path.join(srcPath, 'other.js')
    },

    output: {
        // filename: 'bundle.[contentHash:8].js',  // 打包代码时，加上 hash 戳
        filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key
        path: distPath,
        // publicPath: 'http://cdn.abc.com'  // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
    },


    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
        })
    ]

4.2抽离CSS文件

// dev 开发模式下不需要单独抽离
            {
                test: /\.css$/,
                // loader 的执行顺序是：从后往前
                loader: ['style-loader', 'css-loader', 'postcss-loader'] // 加了 postcss
            },
            {
                test: /\.less$/,
                // 增加 'less-loader' ，注意顺序
                loader: ['style-loader', 'css-loader', 'less-loader']
            }


// 生产模式下需要单独抽离，优化性能
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
            // 抽离 css
            {
                test: /\.css$/,
                loader: [
                    MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                    'css-loader',
                    'postcss-loader'
                ]
            },
            // 抽离 less --> css
            {
                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'
        })
    ],
    optimization: {
        // 压缩 css
        minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
    }

4.3抽离公共代码

• 第三方模块抽离
• 公共模块抽离
• 别的部分改动后不会对抽离部分重新打包，优化性能

    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  // 公共模块最少复用过几次
                }
            }
        }
    }

4.4懒加载

4.5处理Vue

           {
               test: /\.vue$/,
               loader: ['vue-loader'],
               include: srcPath
           },

5 module chunk bundle 的区别

• module -各个源码文件，webpack中一切皆模块
• chunk-多模块合并成的，如entry import() spiltChunk
• bundle-最终的输出文件
  

6 webpack性能优化

• 优化打包构建速度-——开发体验和效率
• 优化产出代码——产品性能

6.1优化打包构建速度

• 优化babel——loader
• IgnorePlugin
• noParse
• happyPack
• ParallelUglifyPlugin
• 自动刷新
• 热更新
• DLLPlugin

6.1.1 优化babel—loader

• 缓存
• 明确打包范围

6.1.2 IgnorePlugin——避免引入无用模块

• 例如： import moment from ‘moment’
• 默认会引入所有语言的JS代码，代码过大
• 如何只引入中文？

6.1.3 noParse——避免重复打包

• 已经打包过的文件不再打包

• IgnorePlugin直接不引入，代码中没有
• noParse引入，但不打包

6.1.4 happyPack多进程打包

• JS单线程，开启多进程打包
• 提高构建速度（特别是多核CPU）

const HappyPack = require('happypack')



            {
                test: /\.js$/,
                // 把对 .js 文件的处理转交给 id 为 babel 的 HappyPack 实例
                use: ['happypack/loader?id=babel'],
                include: srcPath,
                // exclude: /node_modules/
            },


        // happyPack 开启多进程打包
        new HappyPack({
            // 用唯一的标识符 id 来代表当前的 HappyPack 是用来处理一类特定的文件
            id: 'babel',
            // 如何处理 .js 文件，用法和 Loader 配置中一样
            loaders: ['babel-loader?cacheDirectory']
        }),

6.1.5 ParallelUglifyPlugin——压缩JS代码

• webpack 内置 Uglify工具压缩JS
• JS单线程，开启多进程压缩更快
• 和happyPack同理

const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')


        // 使用 ParallelUglifyPlugin 并行压缩输出的 JS 代码
        new ParallelUglifyPlugin({
            // 传递给 UglifyJS 的参数
            // （还是使用 UglifyJS 压缩，只不过帮助开启了多进程）
            uglifyJS: {
                output: {
                    beautify: false, // 最紧凑的输出
                    comments: false, // 删除所有的注释
                },
                compress: {
                    // 删除所有的 `console` 语句，可以兼容ie浏览器
                    drop_console: true,
                    // 内嵌定义了但是只用到一次的变量
                    collapse_vars: true,
                    // 提取出出现多次但是没有定义成变量去引用的静态值
                    reduce_vars: true,
                }
            }
        })

6.1.6 关于开启多进程

• 项目较大多进程打包会提高性能
• 项目较小多进程打包回较低速度（进程开销）
• 按需使用

6.1.7 自动刷新（保存代码页面会自动更新）

6.1.8 热更新

• 自动刷新：整个网页全部刷新，速度较慢
• 自动刷新：整个网页全部刷新，状态会丢失
• 热更新：新代码生效，网页不刷新，状态不丢失

//dev
const HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');


    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')
    },
    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,



//js
// 增加，开启热更新之后的代码逻辑
if (module.hot) {
    module.hot.accept(['./math'], () => {
        const sumRes = sum(10, 30)
        console.log('sumRes in hot', sumRes)
    })
}

6.1.9 DLLplugin 动态链接库插件

• 前端框架如Vue react，体积大，构建慢

• 较稳定，不常升级版本

• 同一个版本只构建一次即可，不用每次都重新构建

• webpack已内置Dllplugin支持

• DllPlugin - 打包出dll文件

• DllReferencePlugin -使用dll文件

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'),
    }),
  ],
}





const path = require('path')
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const webpackCommonConf = require('./webpack.common.js')
const { srcPath, distPath } = require('./paths')

// 第一，引入 DllReferencePlugin
const DllReferencePlugin = require('webpack/lib/DllReferencePlugin');

module.exports = merge(webpackCommonConf, {
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.js$/,
                use: ['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': ''
                }
            }
        }
    }
})

6.1.10 优化构建速度(可用于生产环境)

• 优化babel—loader
• IgnorePlugin
• noParse
• happyPack
• ParallelUglifyPlugin

不可用于生产环境：

• 自动刷新
• 热更新
• DLLPlugin

6.2 webpack性能优化—产出代码

• 体积更小
• 合理分包，不重复加载
• 速度更快，内存使用更少

6.2.1 小图片base64编码

            // 图片 - 考虑 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'
                    }
                }
            },

6.2.2 bundle加hash

        filename: '[name].[contentHash:8].js', // name 即多入口时 entry 的 key

6.2.3 懒加载

6.2.4 提取公共代码

6.2.5 IngorePlugin

6.2.6 使用production（开启生产模式）

• 自动开启代码压缩
• Vue React等会自动删掉调试代码（如开发环境的warning）
• 启动Tree-Shaking(打包时删减掉没有使用的代码部分)

//Tree-Shaking
// ES module才能让tree——shaking生效
//commonjs不行

ES6 Module和Commonjs区别

6.2.7 Scope Hosting

• 代码体积更小
• 创建函数作用域更少
• 代码可读性更好

7 babel(ES6–>ES5)

• 环境搭建&基本配置
• babel-polyfill
• babel-runtime

7.1 环境搭建&基本配置

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

7.2 babel-polyfill

• polyfill 补丁
  
  

7.3 babel-polyfill如何按需引入

const sum = (a, b) => a + b

// 新的 API babel处理不了
Promise.resolve(100).then(data => data);

// 新的 API
[10, 20, 30].includes(20)

// 语法，符合 ES5 语法规范
// 不处理模块化（webpack）

• babel处理不了新的API
• 需要引入polyfill进行打包
  
• babel-polyfill文件非常大
• 需要按需引入

  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": 3 //版本
      }
    ]
  ],

babel-polyfill问题：

• 污染全局环境 =>解决方案：babel-runtime

window.Promise1 = function() {}
Array.prototype.includes1 = function () {}

//使用方
window.Promise = 'abc'
Array.prototype.includes = 100

7.4 babel-runtime

• 对方法重命名

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