webpack配置多页面应用

50 阅读1分钟

对应的 webpack config


const HtmlWebpackPlugin = require('html-webpack-plugin'); 

module.exports = {  
    entry: {  
        app: './src/app.js',  
        admin: './src/admin.js',  
    },  
    plugins: [  
        new HtmlWebpackPlugin({  
            filename: 'index.html',  
            chunks: ['app']  
        }),  
        new HtmlWebpackPlugin({  
            filename: 'admin.html',  
            chunks: ['admin']  
        })  
    ],  
};

但是,这样配置会有一个「重复打包」的问题:假设 app.js 和 admin.js 都引入了vue.js,那么 vue.js 的代码既会打包进 app.js,也会打包进 admin.js。我们需要使用
optimization.splitChunks 将共同依赖单独打包成 common.js(HtmlWebpackPlugin会自动引入 common.js)。

如何支持无限多页面?

使用Node.js写遍历代码。


const HtmlWebpackPlugin = require('html-webpack-plugin');  
const fs = require('fs')  
const path = require('path')  
const filenames = fs.readdirSync('./src/pages')  
    .filter(file => file.endsWith('.js'))  
    .map(file => path.basename(file, '.js'))  
const entries = filenames.reduce((result, name) => (  
{ ...result, [name]: `./src/pages/${name}.js` }  
), {})  
const plugins = filenames.map((name) =>  
    new HtmlWebpackPlugin({  
    filename: name + '.html',  
    chunks: [name]  
    })  
)  
module.exports = {  
    entry: {  
        ...entries  
    },  
    plugins: [  
        ...plugins  
    ],  
};