Webpack配置全解析（基础篇）

插件(plugins)：用于执行范围更广的任务

你的第一个打包器

我们首先在全局安装webpack：

npm install webpack webpack-cli –g

webpack可以不使用配置文件，直接通过命令行构建，用法如下：

webpack [] -o

这里的entry和output就对应了上述概念中的入口和输入，我们来新建一个入口文件：

有了入口文件我们还需要通过命令行定义一下输入路径dist/bundle.js：

webpack index.js -o dist/bundle.js

这样webpack就会在dist目录生成打包后的文件。

我们也可以在项目目录新建一个html引入打包后的bundle.js文件查看效果。

配置文件

命令行的打包方式仅限于简单的项目，如果我们的项目较为复杂，有多个入口，我们不可能每次打包都把入口记下来；因此一般项目中都使用配置文件来进行打包；配置文件的命令方式如下：

webpack [–config webpack.config.js]

配置文件默认的名称就是webpack.config.js，一个项目中经常会有多套配置文件，我们可以针对不同环境配置不同的文件，通过--config来进行切换：

//生产环境配置

webpack --config webpack.prod.config.js

//开发环境配置

webpack --config webpack.dev.config.js

多种配置类型

config配置文件通过module.exports导出一个配置对象：

除了导出为对象，还可以导出为一个函数，函数中会带入命令行中传入的环境变量等参数，这样可以更方便的对环境变量进行配置；比如我们在打包线上正式环境和线上开发环境可以通过env进行区分：

另外还可以导出为一个Promise，用于异步加载配置，比如可以动态加载入口文件：

入口

正如在上面提到的，入口是整个依赖关系的起点入口；我们常用的单入口配置是一个页面的入口：

它是下面的简写：

但是我们一个页面可能不止一个模块，因此需要将多个依赖文件一起注入，这时就需要用到数组了，代码在demo2中：

有时候我们一个项目可能有不止一个页面，需要将多个页面分开打包，entry支持传入对象的形式，代码在demo3中：

这样webpack就会构建三个不同的依赖关系。

输出

output选项用来控制webpack如何输入编译后的文件模块；虽然可以有多个entry，但是只能配置一个output：

这里我们配置了一个单入口，输出也就是bundle.js；但是如果存在多入口的模式就行不通了，webpack会提示Conflict: Multiple chunks emit assets to the same filename，即多个文件资源有相同的文件名称；webpack提供了占位符来确保每一个输出的文件都有唯一的名称：

这样webpack打包出来的文件就会按照入口文件的名称来进行分别打包生成三个不同的bun