webpack4+动态导入(按需加载方式)

雨点打透心脏的1/2处 2022-03-14 10:52 574阅读 0赞

## 此文为复习或升级webpack过程中的总结。webpack版本为4.29.5 ##

### webpack4+动态导入; ###

*  目的:减少包体积，按需加载。常见使用情况有以下3中

### 1：使用import()的情况 ###

output: {
            filename: "bundle.js",
            chunkFilename: '[name].[hash:8].js',
            path: path.resolve(__dirname, "dist/js"),
        }
    复制代码

动态导入时chunkFilename默认情况是数字，0,1....;当我们动态引入import("lodash")的时候；如果想要知道打包以后的文件是lodash而不是0.js,只需要在导入的时候加注释：这样打包的时候就会就会将注释中的webpackChunkName的值替换\[name\],具体详情参考文档：[dynamic-imports][]

import(/* webpackPrefetch: true,webpackChunkName: "yourFileName",webpackPreload: true */ 'LoginModal')
    import ( /* webpackChunkName: "yourFileName" */ filePath);
    import ( /* webpackChunkName: "lodash" */ 'lodash').then(({
            default: _
        }) => {
            console.log(_)
        }).catch(error => 'An error occurred while loading the component');
    复制代码

### 2：使用require.ensure(dependencies: String\[\], callback: function(require),errcallback:function(err), chunkName: String); ###

//将A单独打包
    require.ensure([],()=>{
        require(A)
    },"bundleA")；
    //将A,B打包到一起，而且从主文件束中拆分出来。但只有 b.js 的内容被执行。a.js //的内容仅仅是可被使用，但并没有被输出。
    //想去执行 a.js，我们需要异步地引用它，如 require(‘./a.js’)，让它的 JavaScritp 被执行。
    require.ensure([A],()=>{
        require(B)
    },bundleAB)
    复制代码

### 3：使用[bundle-loader][] ###

output配置
      output: {
            filename: "js/[name].[hash:8].js",
            chunkFilename: 'js/[name].[hash:8].js',
            path: path.resolve(__dirname, "./dist"),
            // publicPath: "./"
        },
    
    
    复制代码

#### 当name:"\[name\]"时默认会将所有符合条件的文件单独打包，例如： ####

webpack.module.rules配置如下
       {
                    test: /\.bundle(\.js|\.css)$/,
                    use: {
                        loader: "bundle-loader",
                        options: {
                            lazy: true,
                            name: "[name]"
                        }
                    }
                }
    复制代码

index.js
    import bundle from './agg.bundle.js';
    import bundle2 from '@/bgg.bundle.js';
    复制代码

会打包出来两个文件，文件名为文件名+此次打包的hash;

#### 当name：string时 ####

webpack.module.rules配置如下
       {
                    test: /\.bundle(\.js|\.css)$/,
                    use: {
                        loader: "bundle-loader",
                        options: {
                            lazy: true,
                            name: "my-chunk"
                        }
                    }
                }
    复制代码

index.js
    import bundle from './agg.bundle.js';
    import bundle2 from '@/bgg.bundle.js';
    复制代码

会将所有符合条件的文件打包成一个包，包名为my-chunk+此次打包的hash;

[dynamic-imports]: https://link.juejin.im?target=https%3A%2F%2Fwebpack.js.org%2Fguides%2Fcode-splitting%2F%23dynamic-imports
[bundle-loader]: https://link.juejin.im?target=https%3A%2F%2Fwebpack.js.org%2Floaders%2Fbundle-loader