一、什么是webpack

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

我们可以俗称为打包机。

我们为什么需要webpack呢？我们知道我们现在所学的很多ES新特性（ES6之后包括ES6）都是不能直接被浏览器所识别的，还有我们的CSS预编译，比如SCSS、less等，还有我们用的vue页面，ts文件，这些都不能被浏览器所识别。那么为了让浏览器可以正确的解析出这些文件，webpack就应运而生，他可以帮助我们把这些代码转换为浏览器所识别的代码。

二、webpack的核心概念

2.1 入口entry

入口（entry point）指示webpack应该使用那个模块，来作为构建其内部依赖的开始。

2.2 出口output

output告诉webpack在哪里输出它所创建的bundle,以及如何命名这些文件

2.3 loader

loader能让webpack去处理其他类型的文件，并将他们转换为有效的模块

2.4 plugin

loader用于转换某些类型的模块，而插件plugin可以用于执行范围更广的任务

2.5 模式mode

通常会配置为development、production或none的其中一个，development为开发环境，production为生产环境，也就是正式环境

三、webpack配置

这里，我们将配置一个webpack环境，首先我们建一个文件夹，用VScode打开

打开终端，进行项目的初始化,-y的仪式是按照默认配置初始化

初始化之后我们了一看见一个package.json文件

之后安装webpack相关依赖

安装之后我们可以看到package.json多出的devDependencies内已经有了我们需要的依赖

之后我们新建一个webpack.config.js文件，来进行相关的配置。新建一个src文件夹，下面建一个index.js文件，作为我们的入口文件

首先我们配置好mode和入口，

我们可以打包一下，看一下效果，使用npx webpack命令

可以看到打包之后新增了一个dist文件夹，下面默认有一个main.js,我们是可以将输出的文件重新命名的.配置成如下情况，之后重新打包。我们发现dist下已经是我们想要的index.js了

上面是我们打包的js文件，我们其实也可以打包html文件，首先我们需要安装一个依赖来帮助我们实现

之后在webpack.config.js中引入并配置

重新打包，可以看到dist下面有一个index.html

我们也可以让其按照指定文件模板进行打包，在src下新建文件index.html

之后在webpack.config.js中配置

注意：当安装完html-webpack-plugin后打包可能报如下错误，这是因为版本太高了，我们可以安装4.多版本

四、配置优化

上面的配置知识一些基础的配置，当项目变得复杂时，我们也需要对webpack配置进行优化，我们这里提供一种思路，就是按照环境用途把webpack.config.js进行拆分，拆分成如下：

把之前配置好的内容复制到webpack.base.config.js中，作为基础配置

之后配置一下webpack.dev.config.js。这个配置的作用是相当于在开发环境下使用cheap模式，大幅度提高sourceMap的生成效率。

接下来我们配置一下生产环境，我们需要安装一个依赖，这个依赖的作用是每次打包的时候上一次的到爆文件就会被清除

之后我们需要在总配置里使用这些配置，我们需要引入一个插件用来合并配置。

之后我们在webpack.config.js内根据环境进项相关文件合并

到这里我们就可以把我们最初的webpack.config.js删除了 同时之前写的mode我们也可以去掉了。

五、babel的配置

babel可以将我们的ES6+代码转换为ES5的代码，我们需要先安装依赖

之后我们进行配置

总结

我们通过这样一个小案例就完成了webpack的基本配置。其实webpack的强大远不止如此，他还能解决非常多的问题，有兴趣的小伙伴可以自行探索呦。

最后，如果你觉得有所收获，欢迎点个赞。不胜感激。