Webpack中常规配置项

1、webpack.config.js 配置文件

当我们安装好webpack之后，就可以使用webpack命令了，比如要将一个main.js文件打包成一个bundle.js文件，可以使用如下命令：

webpack main.js bundle.js

一般在实际的项目开发中，要把这些命令写到一个webpack.config.js的文件中。上面打包操作可以做如下配置：

module.exports = {
   
	entry: './main.js',
	output: {
   
		filename: 'bundle.js'
	}
};

在上面的配置文件中，我们配置了项目的入口（entry）和出口（output），在该项目的关系图中，entry字段指定了入口文件，即把main.js作为起点。output字段是指定了输出位置，即指定webpack把整理后的资源放在哪里。

2、webpack核心概念

webpack主要有4个核心概念：

入口（entry）：项目入口，也是webpack所有依赖关系图的起点。

出口（output）：指定webpack打包应用程序的目录。

加载器（loader）：加载需要处理的模块，对模块进行转换处理。

插件（plugins）：定义项目要用到的插件。

webpack入口（entry）和出口（output）

在前面的内容中，我们已经了解到了，webpack是一个模块打包工具，需要处理具有依赖关系的各个模块，这些模块会构成一个依赖关系图（dependency graph）。webpack的入口就是这张关系图的起点，指的是入口文件。webpack出口指的是需要把这张关系图导出到哪个文件中，即导出文件。

（1）入口（entry）

entry字段指定了入口文件，也可以理解为当前项目启动时运行的第一个文件，语法为：

entry： string | object | Arrary<string>

entry字段支持多种类型，值可以是字符串、对象、数组。简单来理解，就是entry可以指定一个文件入口，也可以指定多文件入口。我们举例来说明entry的用法：

单文件入口示例

// 使用key-value方式
module.exports = {
   
    entry: 'path/to/my/entry/main.js'
};

// 或者使用对象方式
module.exports = {
   
    entry: {
   
        main: 'path/to/my/entry/main.js'
    }