Webpack4使用总结

最近一个工程要搭建脚手架，不经意看到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会标示成：cdn.example.com/assets/[has…

模式

这里要插入讲一下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，或者在构建过程当中，经过代码自动生成的方式均可以。