webpack配置之---入口

entry

单入口

由于一般的单页面项目只有一个入口,也就是单入口,单入口的配置方式有以下三种方式,如果有遗漏的欢迎补充

1、字符串方式

以下这几行代码解释:

entry:本项目的入口文件

output:本项目打包后的输出文件

javascript 复制代码
module.exports = {
  entry: './src/index.js',  // 入口文件
  output: {
    filename: 'bundle.js',  // 打包后的文件名
    path: path.resolve(__dirname, 'dist'),
  },
};

2、数组方式

以下这几行代码解释:

entry:本项目的入口是单入口即app,但是该入口app依赖俩文件

javascript 复制代码
module.exports = {
  entry: {
    app: ['./src/app.js', './src/appHelper.js'],  // 入口为多个文件
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

3、对象方式

javascript 复制代码
entry: {
  app: {
    import: ['./src/app.js', './src/appHelper.js'],  // 使用 import 数组指定多个文件
    dependOn: 'vendor',  // 可以指定依赖其他入口(如果有的话)
  },
  vendor: ['./src/vendor.js'],  // 假设这里有一个单独的 vendor 入口
},

多入口

当多个入口时,每个入口的配置方式有以下三种,如果有遗漏的欢迎补充

1、字符串

其中键表示入口的名称,值表示对应的入口文件路径。每个入口都会生成一个对应的打包文件。

在这个配置中,entry 是一个对象,appvendor 是两个不同的入口文件。Webpack 会分别为这两个入口生成 app.bundle.jsvendor.bundle.js

javascript 复制代码
module.exports = {
  entry: {
    app: './src/app.js',         // 第一个入口
    vendor: './src/vendor.js',   // 第二个入口
  },
  output: {
    filename: '[name].bundle.js',  // 使用 [name] 占位符来动态生成文件名
    path: path.resolve(__dirname, 'dist'),
  },
};

2、数组

每个入口可以配置为一个包含多个文件路径的数组。Webpack 会将所有文件打包在一起,按顺序构建依赖图。

javascript 复制代码
module.exports = {
  entry: {
    app: ['./src/app.js', './src/appHelper.js'],  // 入口为多个文件
    vendor: ['./src/vendor.js', './src/vendorHelper.js'],
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

这种方式下,app 入口由两个文件 app.jsappHelper.js 组成,Webpack 会处理这些文件的依赖关系并打包成 app.bundle.js

3、对象(带有优化功能)

当项目中有多个入口,并且某些代码是共享的,你可以使用 dependOn 来指定共享的模块。这有助于进行代码拆分,优化打包结果。

javascript 复制代码
module.exports = {
  entry: {
    app: {
      import: './src/app.js',
      dependOn: 'common',  // 共享的模块
    },
    vendor: {
      import: './src/vendor.js',
      dependOn: 'common',  // 共享的模块
    },
    common: './src/common.js',  // 公共模块
  },
  output: {
    filename: '[name].[contenthash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      chunks: 'all',  // 启用代码拆分
    },
  },
};

在这个例子中,appvendor 都依赖于 common 模块。Webpack 会将 common 模块提取出来作为一个独立的 chunk,从而避免冗余的代码。

总结:

  • 单入口配置:适用于只有一个入口文件的简单项目。配置方式为一个字符串路径。
  • 多入口配置 :适用于需要多个入口文件的项目,可以使用对象或数组方式配置。
    • 对象方式:每个入口配置为对象的属性,键为入口名称,值为文件路径。
    • 数组方式:每个入口配置为数组,多个文件按顺序打包。
  • 动态入口:可以根据环境变量或其他条件动态选择入口文件。
  • 多个页面入口:多个页面的多入口配置,使得每个页面生成独立的 JavaScript 文件。
  • 代码拆分 :通过 importdependOn 配置共享模块,进行代码拆分,优化打包结果。
相关推荐
F2E_Zhangmo37 分钟前
基于cornerstone3D的dicom影像浏览器 第三章 拖拽seriesItem至displayer上显示第一张dicom
前端·javascript·cornerstone·cornerstone3d·cornerstonejs
gnip6 小时前
Jst执行上下文栈和变量对象
前端·javascript
excel6 小时前
🐣 最简单的卷积与激活函数指南(带示例)
前端
醉方休6 小时前
npm/pnpm软链接的优点和使用场景
前端·npm·node.js
拉不动的猪7 小时前
简单回顾下Weakmap在vue中为何不能去作为循环数据源,以及替代方案
前端·javascript·vue.js
How_doyou_do7 小时前
数据传输优化-异步不阻塞处理增强首屏体验
开发语言·前端·javascript
奇舞精选7 小时前
超越Siri的耳朵:ASR与Whisper零代码部署实战指南
前端·人工智能·aigc
奇舞精选7 小时前
Nano Banana 如何为前端注入 AI 控制力
前端·aigc
一支鱼7 小时前
基于 Node.js 的短视频制作神器 ——FFCreator
前端·node.js·音视频开发
龙潜月七7 小时前
Joplin-解决 Node.js 中 “digital envelope routines::unsupported“ 错误
node.js