webpack 核心概念-entry

概念-entry

入口起点(entry point)指示 webpack 应该使用哪个模块,来作为构建其内部依赖图的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口起点(直接和间接)依赖的。

每个依赖项随即被处理,最后输出到称之为 bundles 的文件中,我们将在下一章节详细讨论这个过程。

可以通过配置 entry 属性,来指定一个入口起点(或多个入口起点)。默认值为 ./src。

先看一个简单的例子:

webpack.config.js

module.exports = {

  entry: './path/to/my/entry/file.js'

};

简单理解

entry是webpack 进行构建时的入口

entry 的写法有三种 分别是1 字符串 2 数组 3 对象

其中 字符串 和数组是 对象的一种简写形式

写法说明

1、对象

对象写法其实就是webpack entry的完整写法。这种形式扩展性别叫强。

2、字符串

字符串写法其实就是单个对象简写形式。使用此语法在扩展配置时有失灵活。

3、数组

数组写法其实就是多个入口的简写形式。向 entry 属性传入「文件路径(file path)数组」将创建“多个主入口(multi-main entry)”。在你想要多个依赖文件一起注入,并且将它们的依赖导向(graph)到一个“chunk”时,传入数组的方式就很有用。

基本用法

在webpack中,有多种配置entry的方法,接下来我们来详细说明及如何去配置entry

1、单个入口用法

api:entry: string|Array<string>

webpack.config.js

完整写法:

module.exports = {

  entry: {

    main: './path/to/my/file.js'

  }

}

简写:

module.exports = {

  entry: './path/to/my/entry/file.js'

}

数组:

module.exports = {

  entry: ['./path/to/my/entry/file.js']

}

2、多个入口用法

api:entry: {[entryChunkName: string]: string|Array<string>}

webpack.config.js

完整写法:

const config = {

  entry: {

    app: './src/app.js',

    vendors: './src/vendors.js'

  }

};

数组写法

module.exports = {

  entry: ['./src/app.js', './src/vendors.js']

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 目录第1章 webpack简介 11.1 webpack是什么? 11.2 官网地址 21.3 为什么使用 web...
    lemonzoey阅读 1,767评论 0 1
  • 一、什么是 webpack webpack 是一个模块打包机,将根据文件间的依赖关系对其进行静态分析,然后将这些模...
    沫之阅读 56,798评论 0 21
  • /*生成环境配置文件:不需要一些dev-tools,dev-server和jshint校验等。和开发有关的东西删掉...
    David_Sam阅读 1,091评论 0 1
  • 全局安装webpack 全局安装webpack会有个问题,就是当你有两个项目依赖于不同版本的webpack,就会有...
    説好的妹紙呢阅读 1,899评论 0 11
  • publicPath指定了一个在浏览器中被引用的URL地址。 对于使用 和 加载器,当文件路径不同于他们的本地磁盘...
    飞呀飞哥阅读 1,726评论 0 0