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

接上篇......

十二、编译打包优化

1、简化编译后的文件
如果看到dist目录里有xxx-vendors.xxx.js文件，这个是第三方包
部署时可以做优化，第三方包用CDN做优化

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

// 两个环境都需要的公共配置// 从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，用的时候需要newplugins: [// 用于把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+的代码编译成ES5exclude: /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加速链接。