webpack之旅: 初识webapck

今天我们开始新的一个章程，在之后的博客记录中我将一步一步和大家学习惯于webpack的一些配置和在项目中的使用，声明:webpack的配置内容实在过多，我们不可能都说到，所以就只说一些常用的配

开始: webpack到底是什么?
实际它的定义时有个模块打包工具，将前端开放中的不同的模块打包到一起，在页面引入时减少模块的加载，以模块化的形式关联个文件间的关系，所以我们可以看到在很多的脚手架工具中使用webpack打包后的项目最终只引入了一个js文件，就将所有的关联的模块文件都给引入了。

---

webpack是基于node开发的模块打包工具，所以之后我们在做webpack的配置时进行模块的引入需要遵循CommonJs的模块引入规则，同时使用webpack之前我们要也要为开发环境配置上node的开发环境,同时初始化我们的项目的node环境: (npm init) 即可，npm 是node的一个包管理工具，在安装node后默认就装上了, 我们可以在命令行工具中使用 npm -v 查看我们当前npm的版本

---

初始化好node的环境后我们便可以为我们的项目中安装上webpack打包工具了:
运行npm install webpack webpack-cli -D
(由于我们的webpack打包只需要在开发情况下打包完成上线即可，所以我们安装时也只需要安装到dev环境，它并不是项目运行的依赖)

---

一切安装好后我们进行第一次的打包，首先我们需要我们的目录下有一个需要被打包的文件，之后直接在命令行运行 npx webpack 打包的文件名 即可.
打包成功后我们可以看到我们的项目下多了一个dist目录，该目录下的js文件就是webpack为我们打包生成的文件了，此时我们运行的打包命令，webpack使用的是它的默认的配置文件， 而如果我们需要对其打包的配置文件进行更改设置，就需要编写webpack打包的配置文件了:

---

webpack的配置文件默认的名称是: webpack.config.js,当webapck运行打包命令时，webpack就会到目录下去寻找它的这么一个配置文件，我们现在就简单的配置一下这个文件的一些基本的配置项:

const path = require('path')
// 该文件需要导出webpack的配置对象
module.exports = {
	entry: path.join(__dirname, "src/main.js"),
	output: {
		filename: "bundle.js",
		path: path.join(__dirname, "dist")
	}
}

如上所示，我们便配置配置了一个最简单的webpack的配置项：
entry
这一项表示的是webpack打包的入口，通俗的说就是我们需要让webpack为我们打包哪一个文件
output
这一项表示webpack打包的出口，通俗说就是webpack在打包后将打包生成的文件放到哪里，其中： filename表示webpack打包生成文件的文件名，path表示文件存放的路径

---

之后我们运行webpack打包命令打包文件时就会按照我们的配置文件去执行打包,此时我们只需要在命令行中运行webpack 命令即可完成我们的打包，打包后dist目录下也就出现我们需要的bundle.js 文件

---

当我们运行完成webpac的打包命令后命令行中会出现这么一段信息，我们这里解释一下:

• Version： 表示当前webapck打包的webpack版本
• Time: 表示此次打包的耗时
• Built at： 当前webpack打包的时间
• Assets, Size Chunks, Chunk Name： 看成是一个表格，Assets是打包生成文件的文件名， Size Chunks是打包的文件的大小，即bundle.js文件的大小， Chunk Names 是我们被打包的文件

---

上面我们说到了，webapck的默认配置文件名称是webpack.config.js，但如果我们实际的文件名称不是这个时，如何运行webpack打包呢:?
此时我们只需要在运行打包命令时为webpack显示的指定它的配置文件即可:
webpack --config + 配置文件的路径和名称

---

今天的最后，我们还说一点是，当我们每次运行打包时，我们都要运行webpack命令，或者有时还需要加上–config指定配置文件，这就使得不方便，此时我们可以在package.json中配置我们的打包命令:
在"script"属性下加上如下的代码:

//......
"script": {
	"dev": "webpack"
}
//.....

如上，"dev"命令是我们自定义的，大家也可以自行的改变，这句代码表示的是当我们运行npm run dev的时候，他就会去运行webpack的打包命令

---

好了，今天的webpack入门就到这里了，虽然很简单，但也是最基础的东西，之后我的文章所要做的就是和大家一起一步一步的完善这个webpack.config.js的配置文件