Webpack4系列教程(七) 單頁面解決方案

寫在前面

本節課講解webpack4打包單頁應用過程中的代碼分割和代碼懶加載。不同於多頁面應用的提取公共代碼，單頁面的代碼分割和懶加載不是通過webpack配置來實現的，而是通過webpack的寫法和內置函數實現的。

優勢

通過代碼分割和代碼懶加載，我們可以讓用戶在更短的時間內去看到他想要的頁面

目前webpack針對此項功能提供 2 種函數：

• require.ensure(): 引入但需要手動執行相關 js 代碼
  webpack4 系列教程(四): 單頁面解決方案–代碼分割和懶加載
• import(): 引入並且自動執行相關 js 代碼

import

目錄結構

配置文件

module.exports = {
    entry: {
        app: './src/index.js'
    },
    output: {
        filename: '[name].bundle.js',
        chunkFilename: '[name].chunk.js',
        path: path.resolve('dist')
    },
    mode: 'development',
    plugins: [
        new CleanPlugin('dist'),
        new HtmlPlugin({
            template: './src/index.html',
            hash: true
        })
    ]
}

index.js入口文件代碼

import(/* webpackChunkName: 'a'*/"./js/a").then(function(a){
    console.log('我是入口文件，我引用了子文件：' + a);
});
import(/* webpackChunkName: 'b'*/"./js/b").then(function(b){
    console.log('我是入口文件，我引用了子文件：' + b);
});

執行打包命令