webpack

从 0 到 1 搭建 webpack2+vue2 自定义模板详细教程

最详细的 webpack+vue 构建指南。

用webpack搭建多页面项目

如上配置执行 webpack 命令后，会将入口文件中所有的成员都打包到 build 下，文件名为 entry 对象中的键名。

【工程化】从 0 搭建 VueJS 移动端组件库开发框架

最近参与维护公司内部的一个针对移动端的 UI 组件库，该组件库缺乏文档和严格的文件组织结构。Vue-Donut 的功能比较简单，并不能方便地创建针对移动端 UI 组件库的文档和预览。在参考了 mint-ui 等业界内成熟的方案之后，我在 Vue-Donut 的基础上进行了拓展，最后搭建出了一个非常方便且自动化的开发框架。

webpack与SPA实践之开发环境搭建

目前，公司前端项目开发技术栈基本改造为使用gulp进行自动化构建，webpack进行项目模块化依赖管理，Vue+ Vuex + Vue-Router作为项目组件化开发框架，为了更深入的理解、使用当前技术栈并与读者分享、交流，计划推出一系列相关学习与实践文章。本篇为开篇，主要讲述…

[[webpack] 如何把代码内联进html中？](https://juejin.im/entry/58747...

作者：滴滴公共前端团队 - 水乙我们平常在打包文件的时候，有时候需要把 js、css 等代码内联进 html 中，减少文件的请求，优化加载速度。用过 fis 的同学应该对 __inline 语法比较熟悉，它就是用来把代码内联进 html 的，其实 webpack 也可以借助…

Webpack2初识

本文为腾讯移动分析MTA 产品UI工程师linji的分享。聚焦webpack2的部分目录：变化了解 Tree shaking 1-2 速度以及打包大小对比 Webpack2优缺点汇总温故或知新简单地概括--webpack是一个智能模块依赖分析的打包工具，它通过入口js…

webpack 英文文档阅读笔记 --chunks

webpack 系列文章，敬请关注，如果有路过的大神，希望能指出新人的不足之处。

搭建 vue2 vue-router2 webpack3 多入口工程

通过两个具体场景来介绍如何配置多入口工程

基于 vue-cli 的 webpack 优化配置之路

基于vue-cli的webpack缩短构建时间，主要讲了dll，happypack，alias的效果

Webpack 2 入门教程

本文写于 Webpack 2 正式发布之前（完善文档阶段）。
不仅是一篇 Webpack 2 的入门教程，也让大家了解什么是 Webpack，值得收藏，长文慎入。

webpack进阶——DllPlugin优化打包性能（基于vue-cli）

将静态资源文件（运行依赖包）与源文件分开打包，先使用DllPlugin给静态资源打包，再使用DllReferencePlugin让源文件引用资源文件。

开发 webpack mock server 插件

对于前后端开发的项目，大部分的情况是先约定好接口格式，前端使用本地 mock 数据进行开发，开发后使用后端接口联调。webpack-dev-server 提供了 proxy 配置，我们可以在开发中将接口代理到本地服务，但不能直接代理到 json 文件。本文介绍开发一个 mock server 的插件来解决上述问题。

Vue.js SSR Step by Step (3) - 改造 vue/webpack 脚手架

通过前面两篇文章，写了一个简单的支持 vue 同构的 webpack 配置，但是还没有 dev server，不能热更新和实时编译，用于开发还是非常的麻烦。 Vue 官方的 webpack 脚手架只是针对客户端的，功能强大，配置齐全。所以在这个官方脚手架的基础上改了一个支持 #…

妈妈再也不用担心我不会webpack了

webpack前端工程中扮演的角色越来越重要，它也是前端工程化很重要的一环。本文将和大家一起按照项目流程学习使用wbepack，妈妈再也不用担心我不会使用webpack，哪里不会看哪里。这是一个由浅入深的文章。现在vue、react等脚手架都会自动将开发环境使用的webpac…

细说 webpack 之流程篇

目前，几乎所有业务的开发构建都会用到 webpack 。的确，作为模块加载和打包神器，只需配置几个文件，加载各种 loader 就可以享受无痛流程化开发。但对于 webpack 这样一个复杂度较高的插件集合，它的整体流程及思想对我们来说还是很透明的。那么接下来我会带你了解 webpack 这样一个构建黑盒，首先来谈谈它的流程。

Webpack 2 中一些常见的优化措施

Webpack 是一款强大的前端构建工具, 社区对其介绍的相关文章已经很多了, 本文不再赘述. 基于 Webpack 2, 本文是对我在搭建团队前端脚手架的过程中, 搜罗的 Webpack 2 常见的优化措施的一个总结.

Webpack 打包器面板进阶

终端画面，漂亮的webpack面板 Webpack-dashboard插件在Github网站上星数超过10000，但我还几乎从没碰过。这么棒的插件，为什么不利用起来呢？

知多一点 webpack 的 CommonsChunkPlugin

hello~亲爱的看官老爷们大家好~ 最近一直在学习 webpack 的相关知识。曾几何时我总觉得 webpack 的体系庞大而难以掌握，一直回避不愿去学。然而伟人鲁迅曾说过：世上太多事会因无法掌握而使你狂躁不安，最好的解决方法就是硬着头皮开始做！因而就从比较简单的 Com…

webpack插件webpack-manifest实现HTML5离线缓存

这是一个WebPACK插件。这主要是HTML5的缓存清单文件生成。生成HTML5的缓存清单文件，生成资产体现WebPACK插件，和标签、 manifest属性插入。 webpack-manifest 安装 $ npm i webpack-manifest --sa…

对不起，我们来迟了——webpack 中文社区

webpack2.x 正式版本发布！随之而来，webpack 官方给中文开发者送了一份新春大礼： webpack 官方中文社区正式成立！迷茫与行动我使用 webpack 已经有一年多了。这些日子里，许许多多身边的同事，还有开发者，开始加入 webpack 的使用大潮之中。一方面，同事们对…

webpack 从入门到工程实践

本文的初衷是和你一起理清webpack的使用逻辑，以便能更加容易的编写及拓展自己项目所需的配置文件。不过也得提前说明本文可能并不是一篇好的可以跟着操作的教程（想跟着一步步做的童鞋可以看官方示例（https://webpack.js.org/guides/）和 webpack 入门，看这篇就够了（http://www.jianshu.com/p/42e1...）。

Webpack + Vue 之抽离 CSS 的正确姿势

最近做了个 webpack+vue 的项目，发现打包后的页面体积有点超出预期的大。为了减少请求量，页面的 js 和 css 都是内联在 html 里面的，查看生成的 html 代码后发现，异步引入的 vue 模块中的 css 也被打在了页面上面。页面体积可是影响加载速度的关键，赶紧 google 后解决了这个问题。这里记录下来，希望对大家有所帮助。

webpack 多页应用架构系列（十一）：预打包 Dll，实现 webpack 音速编译

由于 bootstrap 十分庞大，因此每次编译都要耗费大部分的时间在打包 bootstrap 这一块，而换来的仅仅是配置的便利，十分不划算。

我也并非是故意卖关子，这的确是我自己开发中碰到的问题，而在撰写完该文后，我立即着手探索解决之道。终于，发现了 webpack 这一大杀器：DllPlugin&DllReferencePlugin，打包时间过长的问题得到完美解决。

作者语：阅读本文之前，先看下面这个 webpack 的配置文件，如果每一项你都懂，那本文能带给你的收获也许就比较有限，你可以快速浏览或直接跳过；如果你和十天前的我一样，对很多选项存在着疑惑，那花一段时间慢慢阅读本文，你的疑惑一定一个一个都会消失；如果你以前没怎么接触过 Webpack，如果你对 webpack 感兴趣，本文中有一个贯穿始终的例子，如果你能把这个例子自己动手写一次，写完以后你会发现你已明明白白的走进了 Webpack 的大门。

文／zhangwang（简书作者）