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);
});

執行打包命令