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

此文为复习或升级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;