概述
前面文章分别介绍了webpack以及其安装和基本的使用方法，本文主要介绍webpack中的第一个重要特性，入口出口配置。
webpack的配置文件名称为“webpack.config,js”，在本文及后续所有文章中关于webpack的配置都是写在这个文件里的，本文主要介绍webpack针对单个文件和多个文件分别打包的操作流程。
具体操作步骤
1、打包单个文件
1.1 新建“webpack.config.js”文件，然后输入以下代码：
const path=require('path');
module.exports={
entry:'./input.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'output.bundle.js'
}
};上述代码是一个关于webpack简单的配置应用，里面指定了入口和出口配置，文件名称为“webpack.config.js”。
1.2 由上述代码可知，我们需要在同目录位置创建一个“input.js”文件，然后输入以下代码：
const sayHello=function(){
console.log('hello');
}1.3 在此目录位置打开命令行，通过命令“webpack”来进行打包，如下所示：
上述打包完成之后，会创建一个dist文件夹，里面是名为“output.bundle.js”的结果文件，这些都是和我们配置文件中的输出配置对应的。如图：
上述命令执行完之后有一个报警信息，我们可以在配置文件中通过指定mode来解决，如下：
const path=require('path');
module.exports={
entry:'./input.js',
output:{
path:path.resolve(__dirname,'dist'),
filename:'output.bundle.js'
},
mode:'development'
};
重新执行打包命令后并没有出现报警信息，而且打包的结果覆盖了之前生成的结果，不过由于我们指定的是开发这模式并不是默认的生产模式，所以打包结果文件比较大，如图：
2、打包多个文件
上述操作步骤是针对于一个文件进行打包的，在项目中我们需要的是对多个文件进行打包，此时，webpack的入口配置同样支持多入口文件的，具体操作如下。
2.1 修改“webpack.config.js”文件中入口配置参数为对象形式，指定出口参数的文件名称，代码如下：
const path=require('path');
module.exports={
entry:{
home:'./home.js',
about:'./about.js',
other:'./other.js'
},
output:{
path:path.resolve(__dirname,'dist'),
filename:'[name].bundle.js'
},
mode:'development'
};上述代码中将同目录下的三个文件分别打包，然后将打包结果输出到dist文件夹，每个输出结果的文件名称都是“name.bundle.js”为模板，例如：home.bundle.js。
2.2 按照上述代码内容，我们在同目录下创建“home.js”、“about.js”、“other.js”三个文件，各个文件代码如下：
//home.js 文件内容
const sayHello=function(){
console.log('home');
}
//about.js 文件内容
const sayHello=function(){
console.log('about');
}
//other.js 文件内容
const sayHello=function(){
console.log('other');
}
2.3 然后运行命令行，运行命令“webpack”，此时dist文件夹下生成了三个打包的结果文件，如图：
以上就是对于单个文件和多个文件分别打包的操作步骤，主要是配置入口参数和出口参数。
3、附加内容
对于在本文中的代码里有些不清楚的地方在此处做一个说明。
3.1 首先是配置文件中的第一句代码
const path=require('path');这行代码主要是加载进来一个nodeJS的服务，这个服务名称叫“path”，它主要提供路径这样一个服务。这行代码也会在以后我们编写webpack配置文件时经常要用的，其实nodeJS提供了很多的服务供webpack加载调用，这只是其中之一。
3.2 其次就是输出文件中的文件名的书写方式“【name】.bundle.js”，这种写法类似于c语言中占位符的应用，name对应的是入口配置中的home、about、other这些键。
3.3 最后一个问题就是，如果细心的同学可能会打开打包后的文件去看看里面究竟是什么。如果我们打包的时候选择的是生产模式，那我们打开结果文件会看到从头至尾的一大行代码，它里面并没有console.log()这类语句，这是因为在生产模式下webpack打包时去除了这些语句，并压缩了代码，尽可能将代码文件打包压缩到最小，这也是为什么它比开发者模式下打包的结果文件小很多的原因；如果我们打包时选择开发者模式，那我们打开结果文件时发现它和我们平时写的代码类似，有console.log()语句，代码也有换行，可读性很高，这也是它的结果文件比较大的原因。
总结
本文主要介绍了webpack的入口出口配置及针对单个文件和多个文件分别打包的操作流程，通过对本文的阅读，相信大家对webpack的入口出口的简单配置应该有了一个大致的理解。其实webpack提供了很多关于入口出口的配置参数，不过本文主要介绍了最基本的配置，关于入口出口其他参数的配置就需要大家根据自己的需要去配置了。
