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 配置共享模块,进行代码拆分,优化打包结果。
相关推荐
江城开朗的豌豆1 分钟前
Vue和React中的key:为什么列表渲染必须加这玩意儿?
前端·vue.js·面试
江城开朗的豌豆7 分钟前
前端路由傻傻分不清?route和router的区别,看完这篇别再搞混了!
前端·javascript·vue.js
pengzhuofan10 分钟前
Web开发系列-第0章 Web介绍
前端
小鱼人爱编程19 分钟前
Java基石--反射让你直捣黄龙
前端·spring boot·后端
JosieBook2 小时前
【web应用】如何进行前后端调试Debug? + 前端JavaScript调试Debug?
前端·chrome·debug
LBJ辉2 小时前
2. Webpack 高级配置
前端·javascript·webpack
灵感__idea8 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴9 小时前
Mix
前端·webgl
代码续发10 小时前
前端组件梳理
前端
试图让你心动10 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery