前端工程化建设

工程化实现

工具:webpack5

步骤: 业务文件->解析编译(loader)->模块分包(splitChunks)->压缩优化(plugins...)->产物文件(output)

1. 业务文件: app/pages/**
2. 解析编译: vue-loader,css-loader,babel-loader...
3. 模块分包: 通过 optimization 中的 splitChunks 进行分包
4. 压缩优化: 通过 plugins:[ MiniCssExtractPlugin, CssMinimizerPlugin, TerserPlugin] 对css,js优化和压缩
5. 产物文件: 文件落盘 app/public/dist/...
6. elpis-core 通过产物文件渲染页面

app/webpack/config/config.base.js 基础配置思路

// ./app/webpack/config/config.base.js

const webpack = require('webpack')
module.exports = {
    // 入口配置 (多入口SSR配置) 获取./app/pages 下所有的 entry.xx.js文件
    entry:{},
    // 模块解析配置 (决定了加载什么模块, 以及用什么去解析)
    module:{
        rules:[
            // vue: vue-loader
            // css: css-loader less-loader style-loader
            // js: babel-loader
            // png.. :url-loader
        ]
    },
    // 产物输出
    output:{
         filename:"",// 定义打包后的名称 使用[contenthash:8]便于缓冲控制
         path:"",// 打包文件输出路径
         publicPath:""// 打包文件公共路径
    }
    // 插件设置
    plugins:[
        // VueloaderPlugin 把 /\.js/匹配到 .vue文件中的  script标签中
        // webpack.ProvidePlugin({ Vue:vue }) 将vue注入到每个文件, 不用每个文件都import vue
        // webpack.DefinePlugin({}) 定义全局常量  eg: __VUE_OPTIONS_API__: true;

        // 渲染模板
        // new HtmlWebpackPlugin({
        //     // 产物 (最终模板) 输出路径
        //     filename:"",
        //     // 指定要使用的模板文件
        //     template: "", 
        //     // 要注入的代码块 entry中的输出代码块
        //     chunks: "",
        // })
    ],
    // 打包优化配置
    optimization:{
        /**
         * 分包策略
         * 1 vender： 把第三方库 node_modules 打成一个包, 基本不会改动, 除了依赖升级
         * 2 common:  把会经常重复利用到的工具 打成一个包, 不怎么改动.
         * 3 [entry_pages]: 把剩下的业务代码打包
         */
        splitChunks:{
            chunks: "all", // 对同步和异步代码进行分割
            maxAsyncRequests: 10, // 最大异步请求数
            maxInitialRequests: 10, // 最大初始请求数
            //  重要: 分包策略
            cacheGroups:{
                vender: {
                    // 把什么打包: 匹配目录 node_modules目录
                    // 名字: vender
                    // 优先级: 优先打包
                    // 是否强制执行: true
                    // 重要! 是否复用已存在的chunk, 关系着如果有多个地方复用 是否只打一个包!
                    reuseExistingChunk: true,
                }
            }
        }

    }
}

app/webpack/config/config.prod.js 生产配置思路

1. 性能优化

   • 优化打包过程, 多线程打包 happpack / thread-loader(webpack官方)
   • TerserPlugin: 压缩 JavaScript 代码, 删除注释和 console 语句, 支持多线程压缩以提高性能
   • CssMinimizerPlugin: 优化和压缩 CSS 代码, 删除未使用的 CSS
   • 合理的分包策略,区分第三方库,工具库和业务代码.

2. 资源管理

   • MiniCssExtractPlugin: 将 CSS 从 JavaScript 包中提取出来, 为每个包含 CSS 的 JS 文件创建一个单独的 CSS 文件, 支持按需加载
   • CleanWebpackPlugin: 在每次构建之前自动清理 /dist 文件夹, 阻止构建文件的堆积

3. 安全性的配置

   • HtmlwebpackInjectAttributesPlugin: 在这个配置中主要用于添加 crossorigin="anonymous" 属性

app/webpack/config/config.dev.js 开发配置思路

• 启动一个前端的服务器
• 监控文件改动, 重新编译
• 通知浏览器, 实时更新

其中 /entry.tpl 文件是落地到磁盘的文件, 而其中的js/css等文件, 会以编译后的代码片段的形式,注入在开发服务器的内存中, 没有落地.

在 webpack 中用什么去实现这个服务器呢?

• express: 启动服务器
• webpack-dev-middleware: 默认为将所有编译文件写入内存中, 不用落到磁盘, 根据配置 让.tpl结尾的文件落盘, 因为我们是SSR渲染需要通过磁盘文件.
• webpack-hot-middleware: 实现热更新, 在入口文件(entry)添加 webpack-hot-middleware 客户端

抖音“哲玄前端”，《全栈实践课》