webpack介绍及安装

什么是webpack

• 从本质上来讲，webpack是一个javaScript应用的静态模块打包工具

我们从两点来解释上面这句话模块和打包

模块化

• 在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具,让我们可以进行模块化开发。
• 并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,并且将其进行整合打包。
• 而webpack其中一个核心就是让我们可能进行模块化开发,并且会帮助我们处理模块间的依赖关系。
• 而且不仅仅是JavaScript文件,我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用。
• 这就是webpack中模块化的概念。

打包

• 打包就是将webpack中的各种资源模块进行打包合0就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
• 并且在打包的过程中,还可以对资源进行处理比如压缩图片,将scss转成css ,将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作。

webpack的安装

安装webpack首先需要安装node.js，node.js自带软件包管理工具npm

全局安装webpack

• webpack4.0及以上版本

npm install webpack webpack-cli –g
局部安装
npm install webpack webpack-cli --save-dev

• webpack4.0以下版本（@后加版本号）

  npm install webpack@3.6.0 –g
  局部安装
  npm install webpack@3.6.0 --save-dev

• --save-dev是开发时依赖，表示在项目打包后不需要继续使用

为什么使用全局安装后还需要局部安装

• 在终端直接执行webpack命令，使用的是全局安装的webpack
• 在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack