03 webpack4.0学习笔记——配置文件_入口出口

概述

        前面文章分别介绍了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提供了很多关于入口出口的配置参数，不过本文主要介绍了最基本的配置，关于入口出口其他参数的配置就需要大家根据自己的需要去配置了。