接上一篇的内容继续来说,背景篇的内容主要是介绍web前端工具的出现的原因和当前主要JavaScript模块化编程的几种规范!这篇内容主要介绍webpack的初级使用!
注意:目前webpack分为两个版本:1.x 和2.x这两个版的对应配置方式也是不一样的,我目前只使用过1.X的版本。下面例子中所有配置的都是1.x的
这里先上一张webpack官方的图
官方对于webpack的解释:webpack is a module bundler(webpack就是一个模块打包机)。它就是分析你当前项目的结构把项目中用的浏览器不能理解的东西(SCSS , jade, Typescript等),按照合适的方式打包并把它翻译成浏览器可以理解的 css和js。在webpack中一切都是模块(图片、CSS也是)。
安装
注意: 这里使用的环境为windows下!
webpack是依赖于Node.js的,这就是说,再安装webpack之前,你的电脑上要先安装Node.js(且版本不能低于0.6以上),我们去官网上下载一个,一路next即可!
安装好之后我们在CMD中输入 node -v,来检查一下当前的版本以及是否安装成功:
C:\Users\zhang>node -v v7.2.0
接下来,还要说一个东西就是npm(Node package manager)即Node的包管理工具。相当于VS中的Nuget(java中的mav
