webpack4.0多页面配置

最新推荐文章于 2022-09-26 10:02:33 发布

qq_33761266

最新推荐文章于 2022-09-26 10:02:33 发布

阅读量542

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack4.0

本文链接：https://blog.youkuaiyun.com/qq_33761266/article/details/86775908

webpack4.0 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了如何使用Webpack进行多入口文件配置，实现不同页面分别加载对应的JavaScript代码，提高加载效率。通过具体示例，展示了如何设置entry字段，定义output路径，并利用HtmlWebpackPlugin插件自动生成对应的HTML文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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对应要打包的js名
        filename: "[name].js",
        path: path.resolve(__dirname, 'dist'),
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'home.html',
            chunks: ['home'],//告诉每个html要加载的js名
        }),
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'other.html',
            chunks: ['other'],
        })
    ]
}