webpack修炼日记（一）

我们对webpack的印象

说起webpack，大家或多或少都听说过，关于它最多的标签，无疑是“打包工具”，但是除了这个词，大部分人对webpack的了解就可能局限于此了，“webpack啊，我知道，就一个打包工具”。那它为什么被叫做打包工具呢，又是怎么样去打包呢?打包出来的文件到底长什么样子呢？关于这些，很多人对此就是保持一种一知半解的态度，甚至有些人不知道vue脚手架或者react脚手架是基于webpack的，这似乎有点本末倒置。可能因为现在前端的快速的发展或者受大环境的影响，大部分前端人可能学完HTML+CSS和Javascript之后就直接上手去学习vue或者react，vue/react脚手架的好用，让一些前端刚入门的码农们慢慢忘记了webpack的存在或者说根本不知道它的存在。可能要等到脚手架相关配置不知道怎么配，去百度的时候才发现/记起有webpack这回事。与其说是脚手架们让我们想起了webpack，不说webpack让我们用上了更加方便的脚手架。

什么是webpack

对于webpack打包工具的解释，webpack官网上有这么一段话，“本质上，webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容” ，这么一看，大部分人估计得晕，什么是入口，什么又是bundle，这些我们稍后会提到，现在你只需记住webpack我们用到了的相关代码模块，资源等组合起来生成了一个最终的代码资源集合。这好像有点打包的意思了，就像生活中我们准备旅行的时候，将需要用到的物品都收集起来放在一个旅行箱里面一样。零零散散的东西都被集合起来了，我们还对这些物品整理了一下，占的空间变小了！

从入口开始

要知道，一个应用程序的编写，可能涉及各种模块的使用和导入，webpack的工作就是将这些存放在各处的，零零散散的模块集合起来，那么问题来了，从哪开始才可以将项目涉及到的模块都涉及到呢，总不能是随机的吧，这时候就需要入口了。入口对于webpack来说，不可缺少的一部分，webpack从入口开始，找出入口文件直接或者间接依赖的库或者模块。
webpack打包的入口文件默认为src文件夹下的main.js文件，如需自定义入口文件，在项目的根目录下，新建一个webpack.config.js配置文件，和你的package.json同一级（因为webpack的使用需要下载webpack和webpack-cli，所以本文默认根目录下已经创建了package.json）文件。vue或者react脚手架创建的项目配置不同，大家可以移步到它们的官网查看相关配置。好了，废话不多说，让我们来自定义一下项目打包的入口文件吧
1.首先确保你的项目目录结构是如下所示，并且已经安装了webpack/webpack-cli

2.如果不确定下载与否，点开package.json文件,如果出现以下文字，即已安装webpack和webpack-cli。如果未安装，使用npm/pnpm/yarn 等命令行工具将其安装为开发时依赖

3.在项目根目录新建webpack.config.js即webpack配置文件，并且以cjs方式导出配置对象

4.配置项目打包入口文件，这里以src目录下的index文件为项目入口打包文件，也可以指定其他文件作为webpack的项目入口打包文件，配置如下所示：

module.exports={
    entry:"./src/index.js"
}

5.之后在你index.js的打包入口文件里面写入一些代码并且在终端输入npx webpack,可以发现项目目录下多出了dist文件夹，我们打包之后的文件都是在dist文件夹中，也可以输出到其他文件夹下，名称也可以自定义，稍后会提到。

如果不进行入口的自定义配置，那么webpack默认会在src目录下（必须是和webpack配置文件同一级别的src目录）寻找main.js文件进行打包，大家可以自行将webpack中的入口配置文件删除，之后在src文件夹建立main.js，可以发现webpack入口文件不对其指定也可以进行打包。

终端输出信息提示

打包完成后终端会出现这些信息，这是因为没有设置相关的打包模式导致的，webpack在没有设置相关模式的时候默认以生产模式去对代码进行打包，什么是生产模式和开发模式后面会提到

从出口结束

当执行打包命令之后，webpack对代码的一次打包就已经结束了。大家可能会注意到，打包完成之后生成了一个新的dist文件夹用来存放webpack打包之后的代码，请注意，webpack打包完成之后默认生成的代码放在dist文件夹中，生成的打包文件叫做main.js,如果需要对其进行自定义，也可以在配置文件中的output选项中对其配置。

const path = require("path")
module.exports={
    entry:"./src/index.js",
    output:{
        path:path.resolve(__dirname,"./build"), //生成的文件夹叫做build文件夹
        filename:"bundle.js"  //生成的打包之后的js文件名称
    }
}

按照上面的配置，是不是发现和某些脚手架打包生成的文件有点像了？

从入口再出发

当开发多页面应用程序的时候，可能需要多个入口进行打包，这时候也可以在配置文件中指定那几个文件是多页面应用需要打包的入口文件。打包之后会生成多个文件，这多个文件的名称也可以自定义指定。

const path = require("path")
module.exports={
    // entry:"./src/index.js",
    entry:{
        index:"./src/index.js", //index只需要打包的文件，后面指打包的文件所在位置
        main:"./src/main.js"
    },
    output:{
        path:path.resolve(__dirname,"./build"), //生成的文件夹叫做build文件夹
        // filename:"bundle.js"  //生成的打包之后的js文件名称
        filename:`[name].js` //因为多个文件开始打包所以使用占位符，防止混淆
    }
}

运行打包命令之后可以发现文件夹中出现了两个打包文件。

总结

文章到此就结束啦~带大家认识了一下webpack里面我个人认为需要首先了解的配置，出口＋入口文件的配置，但是这些配置还比较简单和易于理解滴。后续会更新其它内容滴。