webpack-打包多页面

最新推荐文章于 2024-09-23 11:10:13 发布

原创最新推荐文章于 2024-09-23 11:10:13 发布 · 198 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack

本文详细介绍了如何使用Webpack进行多页面应用的配置，通过new两个HtmlWebpackPlugin实例，实现不同入口文件对应不同HTML模板的打包。具体包括配置多入口、设置输出文件名、使用插件自动生成HTML文件等关键步骤。

注意的是需要 new 两个 HtmlWebpackPlugin（）

const path = require('path');

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

module.exports = {
    //多入口
    mode: 'production',
    entry: {
        home: './src/index.js',
        other: './src/other.js'
    },
    output: {
        // [name] 表示 home 和 other
        filename: '[name].js',
        path: path.join(__dirname, './dist')
    },
    plugins: [

        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'home.html',
            chunks:['home']
        }),

        new HtmlWebpackPlugin({
            template: 'index.html',
            filename: 'other.html',
            chunks:['other']
        }),

    ],
}