webpack如何打包多頁面應用(mpa)

qwer ?發表於2019-11-07
Web

前言

webpack打包多頁面應用，先思考?完成多頁面打包需要實現的目標:

  • 多入口訪問，訪問/index1時顯示/index1.html，訪問/index2時顯示/index2.html
  • 單入口訪問，只用完成訪問/時顯示/index.html

實現目標需要完成哪些任務:

  • 入口檔案需要寫入兩個
  • 出口檔案根據入口檔名輸出
  • 生成html模板外掛(HtmlWebpackPlugin)需執行兩次，為每個入口檔案生成包含對應js檔案的html
  • 若前端路由使用的 browserHistory，則需要在服務端處理訪問 /index1時 返回 /index1.html的對應問題

實現

Talk is cheap. Show me your code.

const webpackConfig = {
    // ... other config
    entry: {
        index1: [./src/index1.js],
        index2: [./src/index2.js],
    },
    output: {
        path: path.resolve(__dirname, '../build'),
        filename: '[name]-[hash:4].js',
        chunkFilename: '[name]-[hash:4].chunk.js',
        publicPath: '/',
    },
    optimization: {
        runtimeChunk: false,
        splitChunks: {
            cacheGroups: {
                vendors: {
                  test: /[\\/]node_modules[\\/]/,
                  name: 'vendor',
                  chunks: 'all',
                  minChunks: 2,
                },
          },
        },
    },
    // ... loader ...
    plugins: [
        // ... other plugins
        new HtmlWebpackPlugin({
            inject: true,
            filename: 'index1.html', // 輸出的html名稱，預設為 index.html
            template: path.resolve(__dirname, '../public/template.html'),
            // Allows to control how chunks should be sorted before they are included to the HTML. Allowed values are 'none' \| 'auto' \| 'dependency' \| 'manual' \| {Function}
            // 簡單解釋: 控制多個 chunks 的在html注入的順序
            chunksSortMode: 'dependency',
            chunks: ['index1', 'vendor'], // 該 vendor 檔案是使用 splitChunks打包出的公共 node_modules js檔案，如果沒用則不用加
        }),
        new HtmlWebpackPlugin({
            inject: true,
            filename: 'index2.html',
            template: path.resolve(__dirname, '../public/template.html'), //模板可用不同的
            chunksSortMode: 'dependency',
            chunks: ['index2', 'vendor'],
        })
    ]
}
複製程式碼

至此 webpack 配置完成，前三個任務完成

接下來配置服務端對不同入口訪問時返回前端對應html頁面

webpack如何打包多頁面應用(mpa)

本專案使用的 koa2 啟動前端服務 此處 使用 koa2-history-api-fallback 完成了 路由 rewrite，此 npm 包是 connect-history-api-fallback 基於 koa2應用的實現

app.use(history({
    rewrites: [{
        from: /^\/[a-zA-Z0-9/]+$/, // 匹配 /index1/view/login/dengdeng
        to: function(context) {
            const { pathname } = context.parsedUrl
            const page = pathname.match(/^\/[^/]*/[0].substr(1))
            return `/${page}.html` // 返回 /index1.html 有前端路由決定渲染
        }
    }]
}))
複製程式碼

webpack打包多頁面應用已完成，主要用最簡單例子講述其中有哪些細節 優化處可自己實現:

  • 使用讀檔案包讀取 有哪些入口檔案，然後遍歷檔名到 entry 處
  • HtmlWebpackPlugin 處可以迴圈有哪些入口檔案遍歷出渲染哪些頁面 ?

附上github: github.com/Jarryxin/mp…

關於前端路由和後端路由的分析: www.cnblogs.com/songyao666/…

相關文章