前端基础之《React（4）—webpack简介-编译打包优化》

接上篇......

十二、编译打包优化

1、简化编译后的文件

如果看到dist目录里有xxx-vendors.xxx.js文件，这个是第三方包

部署时可以做优化，第三方包用CDN做优化

2、把第三方包从业务代码中抽离出来，为了以后部署时做CDN优化

config.js：

javascript 复制代码

// 两个环境都需要的公共配置

// 从node进程中引入path模块
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { ProgressPlugin, ProvidePlugin } = require('webpack') // webpack自带插件

module.exports = {
    entry: {
        // 把第三方库打包到vendors.js中，从业务代码中抽离出来，为了以后部署时做CDN优化
        vendors: ['react', 'react-dom/client'],
        // 可以给入口文件取个名字，给output使用
        app: {
            // 用import引入main.js作为入口文件
            import: path.resolve(__dirname, '../', 'src/main.js'),
            dependOn: 'vendors' // 用dependOn指定业务代码app依赖于vendors，先打包vendors，再打包app
        }
    },

    // 出口
    output: {
        // 自定义打包结果的输出目录，默认是dist目录，这里只能使用绝对路径
        path: path.resolve(__dirname, '../', 'dist'),
        // 指定打包结果的JS名称规范
        // filename: 'bundle.js' // 量词，一捆、一束
        filename: 'js/[name].[chunkhash:8].js',
        // 每次build打包时，都自动先删除dist中的旧文件
        clean: true
    },

    // 插件
    // 所有webpack插件都是class，用的时候需要new
    plugins: [
        // 用于把JS脚本和index.html自动注入合并
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, '../', 'public/index.html'),
            inject: 'body', // 把JS注入到body结束标签前面
            filename: 'index.html', // 指定打包成功后这个模板叫什么名字
            title: '测试'
        }),
        // 添加编译进度条
        new ProgressPlugin({
            handler(percentage, message, ...args) {
                console.log(percentage, message, ...args)
            }
        }),
        // 从node_modules中加载react包，将其放在全局变量React中，这样之后所有的文件模块都可以直接访问
        new ProvidePlugin({
            React: 'react'
        }),
    ],

    // 在webpack眼中一切文件皆模块，webpack必须使用各种loaders来处理各种不同的模块文件
    module: {
        // 定义模块编译的规则和方式
        rules: [
            {
                test: /\.(js|jsx|ts|tsx)$/, // 检测模块以js结尾
                use: ['babel-loader'], // 使用babel编译器把ES6+的代码编译成ES5
                exclude: /node_modules/, // 排除node_modules目录下的第三方包文件
            }
        ]
    }
}

修改点：

entry: {

// 把第三方库打包到vendors.js中，从业务代码中抽离出来，为了以后部署时做CDN优化

vendors: ['react', 'react-dom/client'],

// 可以给入口文件取个名字，给output使用

app: {

// 用import引入main.js作为入口文件

import: path.resolve(__dirname, '../', 'src/main.js'),

dependOn: 'vendors' // 用dependOn指定业务代码app依赖于vendors，先打包vendors，再打包app

}

编译后的文件：

dist/index.html：

把vendors换成CDN加速链接。