玩转webpack配置，轻松入门

在工作中我们接触到最多的webpack配置项，就是vue或者react脚手架搭建出来的环境，通过下载官方脚手架，然后按照提示一步一步操作，最终会生成如下结构目录(部分文件是我手动添加的)

 里面配置项及其繁多，如果想要自己再手动配置类似开发环境，难免会让人望而却步。

进入正题，什么是webpack？看官方是如何秒速的

“webpack 是一个模块打包器。它的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换（transform）、打包（bundle）或包裹（package）任何资源(resource or asset)。”

官方意思很直白，就是个模块打包器，以vue官方脚手架为例，它都做了哪些配置呢？

部分截图

 看其配置文件，vue脚手架配置文件大致做了如下操作

入口配置：浏览器打开一开始要执行的文件

输出配置：npm run build 执行命令最终打包后文件输出的位置

模块加载：js 图片 scss/css 字体 媒体文件 等，这些文件webpack是不会自动识别的，这里需要我们下载插件去配置它，告诉webpack如何加载这些不同类型的文件（vue脚手架基本上的配置都处理好了，所以配置会觉得配置多）

插件配置：如mini-css-extract-plugin这个插件， 是用来提取网页以这种方式加载的样式，最终提取的内容会打包到.css文件，以文件方式加载到网页中 

打包优化配置：这里配置空间比较大，意思就是项目优化

分环境打包：如哪些插件是在生产环境运行的，哪些是在开发环境配置的，哪些是共同的配置或者说基础的配置，于是就有了这个三个文件 webpack.base.config.js(生产和开发环境共同的配置),webpack.dev.config.js(开发环境的配置) webpack.prod.config.js(生产环境的配置)

可能还有其他配置，先列举这么多，说白了，webpack就是一个没有手和脚的机器人，我们需要让它给我们工作干活，我们就需要给他安装手和脚，这些手和脚我们可以随意生产随意开发，然后让机器人自己去适配，随意开发的前提是我们需要遵循他们制定的规则

用一句话总结webpack的配置，你要让他干什么，你就需要给他配置什么

接下来，我们先让webpack干一个最简单的活，让他运行一个最简单的网页及打包一个最简单的网页

新建demo文件夹(项目文件)，执行 `npm init` 一路回车，然后demo文件夹下会出现一个`package.json`文件夹

package.json文件内容如下

根目录新建一个`index.html`

根目录下新建`index.js`

根目录新建一个`build`文件夹，在build文件里新建`webpack.base.config.js`

此时`html-webpack-plugin`这个插件我们没有，先需要安装它，执行命令`cnpm install html-webpack-plugin --save-dev`

然后我们在`package.json`文件里的"script"对象中新增一行代码 `"start": "webpack-dev-server --config build/webpack.base.config.js"`

此时我们命令里用到了 `webpack-dev-server`这个插件，所以我们需要安装它 `cnpm install webpack-dev-server --save-dev`

到目前为止，我们写了webpack配置文件也没安装webpack插件，所以现在需要安装webpack基础插件，webpack和webpack-cli ，执行命令 `cnpm  install webpack webpack-cli --save-dev` 

看下最终结构图

最后跑下项目，执行命令 `npm run start`，运行结果如下

此刻，项目开发环境算是正常跑起来了，现在需要简单配置下，将项目打包

在`package.json`文件里的"script"对象中新增一行代码 `"build": "webpack --env production --config build/webpack.base.config.js"`

修改文件`build/webpack.base.config.js`，两处改动

此时，我们执行打包命令`npm run build`，dist文件内容及运行结果如下

到这一个最简单的webpack开发及打包环境就配置好了