webpack5 学习系列 —— 入口起点(entry points)

＊且听风吟

已于 2022-03-15 18:12:22 修改

阅读量1.1k

点赞数

分类专栏： webpack 文章标签：学习 webpack javascript

于 2022-03-15 18:09:48 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/123261050

版权

本文详细介绍了webpack5的入口起点配置，包括单个入口、对象语法的使用，以及如何在不同场景下分离app和vendor入口，适用于多页面应用程序的配置。通过理解这些，可以更好地管理和优化webpack构建流程。

摘要由CSDN通过智能技术生成

webpack 入口起点(entry points)

初始化项目配置中的 entry 字段指示 webpack 应该使用哪个模块，来作为构建其内部依赖图(dependency graph) 的开始。

语法：entry: string | [string]

示例：

webpack.config.js：

module.exports = {
   
  entry: {
   
    main: './path/my/entry/file.js',
  },
};

简写：

module.exports = {
   
  entry: './path/my/entry/file.js'
};

也可以将一个文件路径数组传递给 entry 属性，这将创建一个所谓的 “multi-main entry”。

想要一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 “chunk” 中时，这种方式就很有用。

webpack.config.js：

module.exports = {
   
  entry: ['./src/file_1.js', './src/file_2.js'],
  output: {
   
    filename: 'bundle.js',
  }
};

当想通过一个入口（例如一个库）为应用程序或工具快速设置 webpack 配置时，单一入口的语法方式是不错的选择。

不过，使用这种语法方式来扩展或调整配置的灵活性不大。

用法

关注

专栏目录