Webpack

随着 SPA（Single Page App) 单页应用的发展，大家发现，使用的js/css/png等文件特别多。难以管理。文件夹结构很容易混乱。

而且很多时候我们希望项目可以具备： 压缩css, 压缩js, 正确的处理各种js/css的import, 以及相关的模板html文件.

在最初的一段时间里，可以说每个SPA项目发展到一定规模，就会遇到这样的瓶颈和痛点。

为了解决这个问题，就出现了Webpack.

官方网站： https://webpack.js.org/ github: https://github.com/webpack/webpack, 截止2018-6-25, 关注数是 41918.

webpack website

它是一个打包工具，可以把 js, css, node module, coffeescript, scss/less , 图片等等都打包在一起。 这个简直是模块化开发SPA福音！ 所以现在几乎所有的SPA项目，所有的JS项目，都会用到Webpack.

我们在前面的入门中，看到了Vuejs只需要引入一个外部的js文件就可以工作。不过在我们的实际开发中，情况复杂了很多倍。 我们都是统一使用Webpack + Vuejs的方式来做项目的。这样才可以做到 “视图”， “路由”， “component”等等的分离，以及快速的打包，部署，项目上线。

功能

它的功能非常强大，对各种技术都提供了支持，仿佛是一个万能胶水，把所有的技术都结合到了一起：

1.对文件的支持

  • 支持普通文件
  • 支持代码文件
  • 支持文件转url （支持图片）

2.对JSON的支持

  • 支持普通JSON
  • 支持JSON5
  • 支持CSON

3.对JS 预处理器的支持

  • 支持普通javascript
  • 支持Babel ( 来使用 ES2015+ )
  • 支持Traceur ( 来使用 ES2015+ )
  • 支持Typescript
  • 支持Coffeescript

4.对模板的支持

  • 支持普通HTML
  • 支持Pug 模板
  • 支持JADE 模板
  • 支持Markdown 模板
  • 支持PostHTML
  • 支持Handlebars

5.对Style的支持

  • 支持普通style
  • 支持import
  • 支持LESS
  • 支持SASS/SCSS
  • 支持Stylus
  • 支持PostCSS

6.对各种框架的支持

  • 支持Vuejs
  • 支持Angular2
  • 支持Riot

安装方式

  1. $ npm install --save-dev webpack

使用

由于Webpack自身是支持Vuejs的，Webpack 跟 Vuejs 已经结合到很难分清谁是谁，我们就索性不区分。 知道做什么事儿需要运行什么命令就可以了。

所以我们不必专门来单独学习Webpack，了解Webpack的概念就可以.

在接下来的教程中，同学会看到Webpack + Vuejs 共同开发的方法和步骤。