现在，基本上前端的项目打包都会用上 webpack，因为 webpack 提供了无与伦比强大的功能和生态。但在创建一个项目的时候，总是免不了要配置 webpack，很是麻烦。简化 webpack 配置的一种方式是使用社区封装好的库，比如 roadhog。

如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。dev-server 使用了非常强大的 http-proxy-middleware 包。更多高级用法，请查阅其文档。在 localhost:3000 上有后端服务的话，你可以这样启用代理

由于前端的快速发展，相关工具的发展速度也是相当迅猛，各大框架例如vue,react都有自己优秀的脚手架工具来帮助我们快速启动一个新项目，也正式因为这个原因，我们对于脚手架中最关键的一环webpack相关的优化知之甚少

Vue中使用webpack别名的方法,需要引入公共文件，但是公共文件的文件路径里当前文件很远，那么就会形成上面示例中的那种路径很长的情况。而因为文件目录是约定俗成的，不可轻易更改，无法修改相对路径。那么该怎么办呢？

本文讲述css-loader开启css模块功能之后，如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下，样式文件将会被转译成css module。

Tobias Koppers是一位自由软件开发者，家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访，希望对大家有所启发。

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块

新版 Webpack 中我们所做的每一个更新目的都在于此，为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试，得出的结果非常有趣。结果很惊人，构建时间降低了 60%-98%！

Webpack 作为目前最流行的前端构建工具之一，在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中，Webpack 和我们的开发过程和发布过程都息息相关，如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。

webpack技巧的总结：进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。

Plugins是webpack的基础，我们都知道webpage的plugin是基于事件机制工作的，这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件，以及我们常用的Plugins插件

在webpack的配置项中，可能会见到hash这样的字符。这种带哈希值的文件名，可以帮助实现静态资源的长期缓存，在生产环境中非常有用。带hash的文件是现在web启用缓存来提升性能比较建议的形式。

本文从一个小Demo开始，通过不断增加功能来说明webpack的基本配置，只针对新手。webpack基本的配置就可以熟悉了，会引入loader，配置loader选项，会设置alias，会用plugins差不多。

webpack是前端工程构建的一套工具，为什么一个程序称之为一套呢，是因为webpack其实是npm的一个模块，使用起来的话，这期间还需要很多其它模块来进行支持，所以我称之为一套工具。

webpack 在前端工程中随处可见，当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代，这是你值得选择的之一。