全面掌握Webpack4.0 (三)Webpack的入门配置（持续更新…

前言

之前的章节中带大家认识了webpack是什么以及如何安装webpack，不知道大家记不记得，在之前的章节中我通过npx webpack ./idnex.js这个命令对示例项目进行了打包，打包之后项目中多出了一个dist文件夹，dist文件夹中生成了一个main.js作为最后生成的打包后的js文件。那么问题来了，为什么运行npx webpack ./idnex.js这个命令会生成名叫‘dist’的文件夹而不是叫dist1、dist2、某某某呢？生成的文件为什么叫‘main.js’而不是main1.js、main2.js、某某某.js 呢?要解释这个问题，就涉及到webpack的配置了。其实dist以及main都是webpack默认的配置，这一章我们带大家认识一下webpack都有哪些基础的配置项以及如何手动配置我们的webpack。

首先我在项目中新建一个名为webpack.config.js的文件，用于配置webpack。我们还以之前的demo为例：

如图所示，项目中已经创建好了webpack.config.js（名字一定不要写错）
下面我们在webpack.config.js中写一些代码：

如上图所示，我们在webpack.config.js中写了一些代码，我会逐行给大家解读每一行的用处：
先贴上代码，供大家复制：

const path = require('path');

module.exports = {
    entry:'./index.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'bundle')
    }
}

第一行导入了Node.js中的path模块，用于处理文件路径；
第二行通过module.exports将里面配置的项公开出去；
entry：入口文件（webpack打包哪个文件后面就设置为哪个文件）
output：出口文件对象
filename：打包之后生成的文件的文件名，自定义即可
path：打包之后生成的文件的文件路径，自定义即可
（补充说明一下path.resolve这个方法的用处：第一个参数‘__dirname’表示当前文件所在文件夹的绝对路径.'bundle’表示打包输出的文件夹的名字，自定义即可），path.resolve(__dirname,‘bundle’)的意思就是打包后会在根目录里新建一个bundle文件夹。

以上的配置是webpack最最最基础不过的配置了，下面我们运行npx webpack命令试试：
（因为我们已经配置好了入口文件，就不需要在后面加上./idnex.js了）

此时我们发现打包成功了，根目录下多出了一个bundle文件夹，bundle文件夹下面有了一个名叫bundle.js的文件。此时我们将bundle.js引入到index.html中看一下页面是否可以正常显示


我们可以看到，完全是没有问题的。
说到这里有的同学可能会问这样一个问题，webpack.config.js这个文件一定是要叫这个名字吗？可以自定义吗？
当时是可以的。如果你没有配置过的话，那么webpack会默认执行webpack.config.js这个文件中的语句，比如说我们想把webpack.config.js改成webpackConfig.js，首先我们改一下文件名，然后运行以下命令进行重新打包;
npx webpack --config webpackConfig.js

我们可以看到，打包成功了。
以上的内容为大家展示了一个webpack的最最最基础的一个配置，包括入口文件、出口文件以及Node中的path模块的使用，想必大家应该对webpack有了一个进一步的了解。

下面为了代码整洁，我们我们整理一下我们的项目结构，我们在项目的根目录下新建一个src文件夹，用于存放我们的源代码（源代码就是我们使用webpack打包项目之前的我们写的业务代码），直接上图：

因为index.js的位置变了，所以我们需要改一下webpack的配置文件(在这里我改了一下输出的文件夹的名字，改成了dist，这不是必须的，只是一般webpack打包后的文件夹都会叫dist)：

此时我们删除之前的bundle文件夹，重新对项目进行打包，此时生成了dist文件夹，我们将index.html文件移到dist文件夹中，此时项目结构变成了如下所示：

在这里要注意index.html和bundle.js文件的相对位置不要错。此时再次打开index.html:

正常显示，没有问题。
做过vue的同学此时应该发现我们项目现在的目录结构是不是越来越像你们写vue时的项目结构了呢？

写到这里我还有一点想补充个大家，就是当我们写vue的时候经常会用到一个命令，比如说npm run dev、npm run build等（没写过vue的同学也不要紧，继续往下看就好），其实这些命令的底层都是使用webpack进行配置的，我们打开package.json文件，找到scripts属性：

我们将里面的test先删除，然后跟着我写上如下的脚本：

此时我们在命令行运行：npm run bundle 命令

我们发现，依然打包成功啦！我们通过下面的截图给大家讲一下原理;
当我们运行npm run bundle 命令时，webpack会去package.json文件的scripts属性中去找“bundle”，找到“bundle”后会执行“bundle”后的语句也就是“webpack”,此时执行“webpack”就相当于于执行了npx weboack,从而对项目进行了打包，在以后的章节中，会给大家介绍npm run dev、npm run build等指令的实现过程。本文终。

下一篇：全面掌握Webpack4.0 (四)什么是loader（持续更新…