最近一个工程要搭建脚手架，不经意看到webpac已经升级到4.x了，这边就借机搭建了一个webpack的脚手架，对webpack的研究不是很深， 没关注过它的实现层，只是拿来用，这里大概写下使用过程和对一些配置的理解。

        webpack4和前代来比，精简了很多配置，写法上也更佳优雅和便于理解了，并且支持了0配置的方式，估计也是受到吐槽配置过于负责的诟病而作出的妥协，像parcel主打的概念就是0配置，一行脚本完成打包，不过老实说0配置在大多数情况并不实用，配置这东西多了复杂，少了不灵活，还是需要一个度的。

webpack官网对于webpack的说明列出了四大核心概念：

入口(entry)

输出(output)

loader

插件(plugins)

这里不对这些概念进行展开了，我们的配置实际上就是围绕这4个核心概念做的，先说入口吧

入口（entry）

实际上webpack4在这里的变化不大，这里我介绍一个多页面的配置情况，可能很多人使用vue或者react单页面spa时入口是只需要配置一个的，但是对于多页面程序，入口是要有多个的，像官方给的例子：

在多页应用中，（译注：每当页面跳转时）服务器将为你获取一个新的 HTML 文档。页面重新加载新文档，并且资源被重新下载。然而，这给了我们特殊的机会去做很多事

当然实际使用中我们不可能去一个一个配置入口文件，当然是自动去处理这块了，当然解决办法基本就是读取页面目录，对每个文件生成对应入口文件，当然你可以选择构建的时候为每个文件自动生成entry，也可以提前写好。多页面的共享代码可以使用CommonsChunkPlugin提取打包，这里说一下在webpack4中CommonsChunkPlugin已经不复存在，后文会提到

输出（output）

同样这里的改动也不大，这里也说一个比较重要的小地方，一个使用cdn资源hash的复杂例子：

在编译时不知道最终输出文件的 publicPath 的情况下，publicPath可以留空，并且在入口起点文件运行时动态设置。如果你在编译时不知道 publicPath，你可以先忽略它，并且在入口起点设置 __webpack_public_path__。

publicPath在这里可以理解为一个页面引入文件根路径的地址，像上面的例子页面的src会标示成：http://cdn.example.com/assets/[hash]home~~~(后面省略了)按官方说法可以进行动态的设置。

模式

这里要插入讲一下webpack4新增的模式，记得在之前版本的配置文件里我们经常要使用到process.env去判断环境以处理不同设置，在wenpack4中出现了mode，让环境配置变得简单起来，你可以这样用：

表示当前启用什么环境去处理，当然设置一个mode不仅是生命环境变量这么简单，不同的环境webpack会默认帮你开启对应的plugin.

if  === development :会将 process.env.NODE_ENV 的值设为 developme。启用 NamedChunksPlugin 和 NamedModulesPlugin。

if  === production :会将 process.env.NODE_ENV的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin和 UglifyJsPlugin

我们在开发中，完全可以配置一个 webpack.config.js来放公共的配置，然后建立一个dev环境的js mode设置为development，prod环境的js，mode设置为production,然后借助webpack-merge来完成本地开发及构建的任务。

loader

loader用法上没有什么改变，loader 用于对模块的源代码进行转换。因此，loader 类似于其他构建工具中“任务(task),比如gulp”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript

这里说一种loader的官方不怎么推荐的用法，内联的方式：

可以在 import 语句或任何等效于 "import" 的方式中指定 loader。使用 ! 将资源中的 loader 分开。分开的每个部分都相对于当前目录解析。

importStylesfrom'style-loader!css-loader?modules!./styles.css';

通过前置所有规则及使用 !，可以对应覆盖到配置中的任意 loader。

选项可以传递查询参数，例如 ?key=value&foo=bar，或者一个 JSON 对象，例如 ?{"key":"value","foo":"bar"}，当然这并不是官方推荐的方式，尽量不要使用。

插件

插件这里的改动也并不大，因为使用webpack4时搭建的是一个vue的多页面工程，所以这里写一下对于搭建vue多页面工程的配置方式，网上对于多页面的webpack配置说明比较少，其实对于多页面来说，基本的思想就是在入口配置多项，然后配合HtmlWebpackPlugin为不同的页面关联不同的js文件，也就需要为每个页面配置一个entry.js,里面只需要写初始化vue实例的代码以及页面需要引入的公共组件就可以了，一般方式是循环源码文件夹路径，根据路径配置入口，然后可以在每个页面文件夹下手动写一个用于初始化的entry，或者在构建过程中，通过代码自动生成的方式都可以。