webpack打包多页应用

切图仔

发布于 2022-09-08 16:42:55

24400

代码可运行

文章被收录于专栏：生如夏花绚烂生如夏花绚烂

运行总次数：0

代码可运行

目录结构

│  package.json
│  webpack.config.js
│
└─src
        index.html
        index.js
        other.html
        other.js

项目有两个入口文件，对应两个html

我们在webpack.config.js进行如下配置

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
    //多入口}
    mode:'development',
    entry:{
        home:'./src/index.js',
        other:'./src/other.js'
    },
    output:{
        //[name]=home/other
        filename:'[name].js',
        path:path.resolve(__dirname,'dist')

    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html',
            filename:'home.html',
            chunks:['home']//代码块,指定js文件
        }),
        new HtmlWebpackPlugin({
            template:'./src/other.html',
            filename:'other.html',
            chunks:['other']//代码块
        })
    ]
}

打包后的文件 dist

//home.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
</head>
<body>
    
<script src="home.js"></script></body>
</html>

//other.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<script src="other.js"></script></body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-08-15 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html