webpack（自查）

鹿鸣幽幽
176 阅读3分钟

1.DllPlugin/DllReferencePlugin 拆分文件

  ----将不常更新的框架或者库单独打包编译。如此可以在开发中只需要对业务模块进行编译打包，节省时间
DllPlugin相关设置
entry:{
    lib:[需要单独打包的文]
}
output:{
    library:'[name]_library'
}
plugins:[
    new webpack.DllPlugin({
        context:__dirname
        path:path.resolve(__dirname,'../dist/dll','lib.manifest.json'),
        name:'[name]_library' //与output.library一致
    })
]

DLLReferencePlugin({
    context:__dirname // 与dll路径一只
    manifest:require('../dist/dll/lib.manifest.json)//manifest路径
})

2.MinChunkSizePlugin 设置拆分文件的最小大小

3.CommonsChunkPlugin/SplitChunksPlugin+HashedModuleIdsPlugin/NamedModulesPlugin 代码三方文件分离和文件缓存

output.filename的设置

1.[name].[hash].js的时候输出的所以文件的hash是一样的
2.[name].[chunkhash].js 此时文件的hash值是唯一的的（chunkhash是根据文件的内容生成的），但是一个文件修改还是会导致所有文件的刷新（webapck为了生成最小化的文件大小，而使用标识符不使用模块名称。编译期间生成标识符，从而生成映射关系，保存在chunk manifest 的js对象中;当时我们使用CommonsChunkPlugin分离文件时候，被分离出来的文件会自动移动到entry的最后一个入口文件进行打包。而chunk manifest会跟随这个文件一块打包。更新文件会导致标识符更改，从而映射更改，导致hash更改）
3.需要将manifest文件分离出来

此时：将entry中的文件增减或者修改位置有导致hash变化：由于module.id是默认为根据文件的解析顺序生成增量。文件位置变化，解析顺序也会变化，module.id也会变化。为解决该问题可以使用HashedModuleIdsPlugin/NamedModulesPlugin会根据文件的内容生成ID。从而解决该问题

splitChunks配置

optimization:{
    splitChunks:{
        chunks:
        test:
        name:
        minSize:
        minChunks
        maxAsyncRequests:
        maxInitialRequests:        cacheGroups{
            //设置缓存的地方，会继承和覆盖上面相同的属性
            priority:0,缓存组的优先级
            vendor:{
                chunks:'initial'|'all'（推荐值）|'async'(默认值)
                test:正则验证，符合的会提取chunk
                name:分离出来的chunk名称，如果重名会导致重复打包
                minSize:30000,//最小30000
                minChunks:
                maxAsyncRequests:1,最大异步请求数，默认为1
                maxInitialRequests:1,最大初始化数
                reuseExisitingChunk:true 可以设置是否可以重用该chunk
            }
         
        }
    }
}

4.LimitChunkPlugin 文件编译过后由于有过多的小的chunk文件，可以使用该Plugin将小文件合并减少Http请求

5.IgnorePlugin 打包时候忽略本地的文件

6.UglifyjsPlugin 压缩js文件

7.HtmlWebpackPlugin 可以简化HTML生成。带有chunkhash的文件在生成文件中也可以明显显示。

webpack5新特性 联邦模块插件——****ModuleFederationPlugin

module.exports = {
  // other webpack configs...
  plugins: [
    new ModuleFederationPlugin({
      name: "current_module_name",
      remotes: {
        app_two: "app_two_module_name",        app_three: "app_three_module_name"      },
      exposes: {
        AppContainer: "./src/App"
      },
      shared: ["react", "react-dom", "react-router-dom"]
    }),
    new HtmlWebpackPlugin({
      template: "./public/index.html",
      chunks: ["main"]
    })
  ]
};

插件 ModuleFederationPlugin，插件重要参数：

  1. name 当前应用名称，需要全局唯一。
  2. remotes 可以将其他项目的 name 映射到当前项目中。
  3. exposes 表示导出的模块，只有在此申明的模块才可以作为远程依赖被使用。
  4. shared 是非常重要的参数，制定了这个参数，可以让远程加载的模块对应依赖改为使用本地项目的 React 或 ReactDOM。

比如设置了 remotes: { app_two: "app_two_module_name" }，在代码中就可以直接利用以下方式直接从对方应用调用模块：

import { FormClass } from "app_two/FormClass";
avatar
文章
阅读
粉丝