深入理解webpack打包机制(3)
<span style="color: #008000">//<span style="color: #008000"> /src/multiple/js/utilA.js 可类比于公共库,如 jQuery <span style="color: #008000">//<span style="color: #008000"> /src/multiple/js/utilB.js <span style="color: #008000">//<span style="color: #008000"> /src/multiple/js/utilC.js 这里我们定义了两个入口 pageA 和 pageB 和三个库 util,我们希望代码切割做到:
那么 webpack 需要怎么配置呢? webpack = require( path = require(module.exports =<span style="color: #000000"> {entry: { pageA: [path.resolve(dirname,<span style="color: #800000">'<span style="color: #800000">../src/multiple/pageA.js<span style="color: #800000">'<span style="color: #000000">)],pageB: path.resolve(dirname,<span style="color: #800000">'<span style="color: #800000">../src/multiple/pageB.js<span style="color: #800000">'<span style="color: #000000">),},filename: <span style="color: #800000">'<span style="color: #800000">[name].[chunkhash:8].js<span style="color: #800000">'<span style="color: #000000">,plugins: [ <span style="color: #0000ff">new<span style="color: #000000"> webpack.optimize.CommonsChunkPlugin({ name: <span style="color: #800000">'<span style="color: #800000">vendor<span style="color: #800000">'<span style="color: #000000">,minChunks: <span style="color: #800080">2<span style="color: #000000">,}),<span style="color: #0000ff">new<span style="color: #000000"> webpack.optimize.CommonsChunkPlugin({ name: <span style="color: #800000">'<span style="color: #800000">manifest<span style="color: #800000">'<span style="color: #000000">,chunks: [<span style="color: #800000">'<span style="color: #800000">vendor<span style="color: #800000">'<span style="color: #000000">] }) ] } 单单配置多 entry 是不够的,这样只会生成两个 bundle 文件,将 pageA 和 pageB 所需要的内容全部放入,跟单入口文件并没有区别,要做到代码切割,我们需要借助 webpack 内置的插件 CommonsChunkPlugin。 首先 webpack 执行存在一部分运行时代码,即一部分初始化的工作,就像之前单文件中的 这段代码的含义是,在这些入口文件中,找到那些引用两次的模块(如:utilB),帮我抽离成一个叫 vendor 文件,此时那部分初始化工作的代码会被抽离到 vendor 文件中。 })这段代码的含义是在 vendor 文件中帮我把初始化代码抽离到 mainifest 文件中,此时 vendor 文件中就只剩下 utilB 这个模块了。你可能会好奇为什么要这么做? 因为这样可以给 vendor 生成稳定的 hash 值,每次修改业务代码(pageA),这段初始化时代码就会发生变化,那么如果将这段初始化代码放在 vendor 文件中的话,每次都会生成新的 vendor.xxxx.js,这样不利于持久化缓存 另外 webpack 默认会抽离异步加载的代码,这个不需要你做额外的配置,pageB 中异步加载的 utilC 文件会直接抽离为 chunk.xxxx.js 文件。 所以这时候我们页面加载文件的顺序就会变成: mainifest.xxxx.js vendor.xxxx.js pageX.xxxx.js 当 pageB 需要 utilC 时候则异步加载 utilC执行命令 结果生成了5个文件:异步加载文件utilC.js单独打包成了一个文件0.×××.js,入口pageA,pageB分别打包成文件,pageA和pageB共用模块单独打包成vendor,初始化代码manifest (编辑:ASP站长网) |