Webpack 配置多入口

最新推荐文章于 2024-07-11 10:09:38 发布
最新推荐文章于 2024-07-11 10:09:38 发布
阅读量394 收藏
点赞数
分类专栏： webpack 文章标签： webpack 前端 node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44582045/article/details/132387449
版权
本文介绍了如何配置多入口entry和出口output，利用htmlWebpackPlugin生成多页面，通过contentHash优化缓存，以及如何控制chunk和bundle的使用，以提高性能并实现按需加载。
摘要由CSDN通过智能技术生成

1、配置多入口 entry

index 和 other 为入口名称，即页面名称
在这里插入图片描述

2、配置出口 output

filename 中的 [name] 对应入口的文件名
contentHash 会命中缓存，提高性能
在这里插入图片描述

3、配置插件 htmlWebpackPlugin，生成多页面

htmlWebpackPlugin 插件会生成页面
chunk 为代码块，默认引入 entry 中所有文件
打包的资源就是chunk，输出出去叫bundle
入口有几个页面就配置几个实例
在这里插入图片描述
打包后的dist文件如下，并且打包后的 index.html 或 other.html，只会引入对应的 js 文件
在这里插入图片描述
在这里插入图片描述

老电影故事
关注
专栏目录
webpack 之 配置多入口
shenjing_Shining的博客
11-26 1125
文件结构： src: index.html，other.html，index.js，other.js 配置文件： 文件内容： index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>index page&l
一文搞懂 Webpack 多入口配置
油墨香^-^的博客
06-29 4177
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 、 、 等进行配置，因此在下通过不断探坑，然后将思路和配置过程记录下来，留给自己作为笔记，同时也分享给大家，希望可以帮助到有同样需求的同学们～一个项目中保存了多个
详解webpack 多入口配置
12-11
同事套搭建vue项目，个人推荐了VUE官网的vue-cil的方式，http://cn.vuejs.org/guide/application.html 顺着官网的操作，我们可以本地测试起我们的项目 npm run dev,首先我们要理解webpack打包主要是针对js，查看下面生成的配置，首页是index.html，模版用的index.html，入口文件用的mian.js //file build/webpack.base.conf.js //entry 配置 module.exports = { entry: { app: './src/main.js' }, //.... /
一次理清多入口 Webpack 和 Vite 配置方法
最新发布
weixin_43978501的博客
07-11 390
这个配置会生成两个bundle，一个是main.js，另一个是sub.js。你可以在input对象中添加任意多的入口，每个属性名将作为输出文件的名称，而属性值则是对应的入口文件路径。旨在分享~~~~~~~~~~~~~~~~~~~2、vite 配置多入口方法。
Webpack 如何配置多入口？
Celine921的博客
04-12 4678
关于 Webpack 配置，你了解吗？
webpack配置多入口
longtengg1的博客
07-14 1306
有些项目中，一个项目中要产出多个页面，这时怎么打包？ 1、entry入口中要建多个入口文件 使用path前先引入path const path = require(‘path’) entry: { index: path.join(srcPath, 'index.js'), other: path.join(srcPath, 'other.js') }, 2、修改output output放在webpack.prod.js中； 为了使多个filename不重名，使用
webpackvue2多入口配置实例
08-10
以下是一个基本的Webpack配置文件`webpack.config.js`的示例，展示了如何设置多入口： ```javascript const path = require('path'); module.exports = { entry: { page1: './src/page1/main.js', // 第一个入口...
详解如何快速配置webpack多入口脚手架
10-17
主要介绍了详解如何快速配置webpack多入口脚手架，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack多入口文件页面打包配置详解
08-28
本篇文章主要介绍了webpack多入口文件页面打包配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
webpack打包基础之配置多入口
陌上花开然不归矣
04-16 788
webpack配置之前要先理解四个概念 1、入口（entry） 2、输出（out） 3、loader 4、插件plugins 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 简介的说就是启动首先要访问 的文件。 webpack.config.js...
快速配置 webpack 多入口脚手架
weixin_33890526的博客
12-27 202
背景 当我们基于vue开发单个项目时，我们会init一个vue-cli，但当我们想在其他项目里共用这套模板时，就需要重新init一个，或者clone过来，这非常不方便，而且当多人开发时，我们希望所有的开发代码都在一个git目录下，这时就有了对webpack进行配置的需求，当有些页面需要多入口时，我们又产生了对多入口配置的需求，这里提供一种配置方案，希望能帮助到有需要的人，废话不多说，我们开始吧！ ...
Webpack 打包（二）多入口配置及动态切割代码踩坑
Demi1024w的博客
03-25 1038
本文介绍了项目代码打包构建的时候切割代码，减少引入文件的体积的方法。分享给大家踩坑的经历，也给自己留个记录，方便回顾。 项目基础： 多个页面入口文件 必须引入的有THREE.JS，ECharts.JS 项目需求： 多入口的相关文件配置 js与css文件分离，引入的文件不能过大 必须引入的文件如THREE.JS，提取到公共资源中 （一）HtmlWebpackPlugin配置多入口页面 采用的...
「前端」Webpack多入口配置
Jack's Blog
12-08 479
上周去到了公司实习，在公司见识到了从来没有尝试过的Webpack多入口配置，能够实现不同HTML入口文件渲染不同内容的功能，简单写一篇博客记录一下。 ...
Webpack高级配置「二」-- 配置多入口
louShuMei 的博客
01-19 214
1.js文件 多入口配置： 在公共配置中配置多入口 [webpack.common.js]: entry: { index: path.join(srcPath, 'index.js'), other: path.join(srcPath, 'other.js') }, 生产环境配置多出口 [webpack.prod.js]： output: { // filename: 'bundle.[contentHash:8].js', // 单入口配置打包代码时，加上 hash 戳 filen
webpack配置多入口多出口页面
D_Z_Yong的博客
11-04 701
在配置好单入口的webpack的基础上添加多入口多出口，只需添加其中的代码即可！ 配置单入口页面webpack webpack.config.js entry:{ 'index':'./src/index/main.js',//页面一的js 'one':'./src/one/main.js',//页面二的js },//输入路径 output: { ...
webpack学习之webpack的多入口和多出口配置
qq_32021429的博客
11-14 309
webpack的多入口多出口配置 // webpack.prod.js文件配置 let path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); let {CleanWebpackPlugin} = require('clean-webpack-plugin'); module.exports = { mode: 'production', // 打包环境（生产环境） // 多入口时，ent
webpack多入口配置实战指南
除了入口配置，你可能还需要调整其他Webpack配置，如输出(`output`)、加载器(`loaders`)、插件(`plugins`)等，以适应多入口项目的需求。例如，你可能需要为每个入口生成独立的HTML文件，这可以通过使用 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老电影故事

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值