Webpack 配置多入口

原创 于 2023-08-21 08:30:00 发布 · 506 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#webpack #前端 #node.js

本文介绍了如何配置多入口entry和出口output，利用htmlWebpackPlugin生成多页面，通过contentHash优化缓存，以及如何控制chunk和bundle的使用，以提高性能并实现按需加载。

1、配置多入口 entry

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

2、配置出口 output

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

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

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

前端Webpack的多入口配置方法
AI架构全栈开发实战笔记
04-13 816
本文旨在全面解析Webpack多入口配置的技术细节，为前端开发者提供从基础到进阶的完整指导。内容涵盖多入口配置的基本概念、实现原理、实际应用以及性能优化策略，适用于各种规模的前端项目。文章首先介绍多入口配置的基本概念，然后深入其实现原理，接着通过实际案例展示配置方法，最后讨论性能优化和实际应用场景。每个部分都配有详细的代码示例和解释。Entry（入口）：Webpack构建的起点，指定从哪个模块开始打包Output（输出）：Webpack打包后生成的资源文件Chunk（代码块）
一文搞懂 Webpack 多入口配置
小分享
09-22 366
最近在做项目的时候遇到了一个场景：一个项目有多个入口，不同的入口，路由、组件、资源等有重叠部分，也有各自不同的部分。由于不同入口下的路由页面有一些是重复的，因此我考虑使用 Webpack 多入口配置来解决这个需求。 再一次，在网上找的不少文章都不合我的需求，很多文章都是只简单介绍了生产环境下配置，没有介绍开发环境下的配置，有的也没有将多入口结合 vue-router、 vuex、 Element...
详解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' }, //.... /
webpack5.x性能优化之 代码分包 配置文件分离 多入口 SplitChunks cacheGroups runtimeChunk dynamic import(动态导入) 懒加载 魔法注释
听雨少年的博客
03-31 7910
webpack优化 文章目录webpack优化代码分离认识代码分离多入口起点Entry Dependencies(入口依赖)SplitChunkschunks其他的splitChunks属性(很少手动配置)minSize和maxSizeminChunkscacheGroups默认缓存组缓存组优先级maxAsyncRequestsnamechunkIdsoptimization. runtimeChunk动态导入(dynamic import)动态导入的文件命名代码懒加载魔法注释魔法注释：prefetch预获
webpack 之 配置多入口
shenjing_Shining的博客
11-26 1427
文件结构： 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 如何配置多入口？
Celine921的博客
04-12 4879
关于 Webpack 配置，你了解吗？
React+TypeScript+webpack4多入口配置详解
10-16
项目中将使用多个webpack配置文件，分别是`webpack.config.base.js`（基础配置）、`webpack.config.build.js`（生产环境配置）和`webpack.config.js`（开发环境配置）。 ### `webpack.config.base.js` 这是共享的...
webpackvue2多入口配置实例
08-10
以下是一个基本的Webpack配置文件`webpack.config.js`的示例，展示了如何设置多入口： ```javascript const path = require('path'); module.exports = { entry: { page1: './src/page1/main.js', // 第一个入口...
webpack配置多入口
longtengg1的博客
07-14 1385
有些项目中，一个项目中要产出多个页面，这时怎么打包？ 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不重名，使用
webpack打包基础之配置多入口
陌上花开然不归矣
04-16 906
webpack配置之前要先理解四个概念 1、入口（entry） 2、输出（out） 3、loader 4、插件plugins 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。 简介的说就是启动首先要访问 的文件。 webpack.config.js...
快速配置 webpack 多入口脚手架
weixin_33890526的博客
12-27 249
背景 当我们基于vue开发单个项目时，我们会init一个vue-cli，但当我们想在其他项目里共用这套模板时，就需要重新init一个，或者clone过来，这非常不方便，而且当多人开发时，我们希望所有的开发代码都在一个git目录下，这时就有了对webpack进行配置的需求，当有些页面需要多入口时，我们又产生了对多入口配置的需求，这里提供一种配置方案，希望能帮助到有需要的人，废话不多说，我们开始吧！ ...
Webpack 打包（二）多入口配置及动态切割代码踩坑
Demi1024w的博客
03-25 1201
本文介绍了项目代码打包构建的时候切割代码，减少引入文件的体积的方法。分享给大家踩坑的经历，也给自己留个记录，方便回顾。 项目基础： 多个页面入口文件 必须引入的有THREE.JS，ECharts.JS 项目需求： 多入口的相关文件配置 js与css文件分离，引入的文件不能过大 必须引入的文件如THREE.JS，提取到公共资源中 （一）HtmlWebpackPlugin配置多入口页面 采用的...
「前端」Webpack多入口配置
Jack's Blog
12-08 570
上周去到了公司实习，在公司见识到了从来没有尝试过的Webpack多入口配置，能够实现不同HTML入口文件渲染不同内容的功能，简单写一篇博客记录一下。 ...
Webpack高级配置「二」-- 配置多入口
louShuMei 的博客
01-19 321
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 787
在配置好单入口的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 378
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配置多入口的作用？
最新发布
05-07
为PC端和移动端分别配置入口，生成两套资源文件： ```javascript entry: { pc: './src/pc/main.js', mobile: './src/mobile/main.js' } ``` --- #### 三、配置方法示例 1. **定义多入口** 使用对象形式...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

老电影故事

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

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

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

打赏作者

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

抵扣说明：

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

余额充值