webpack的安装

webpack起步

 

###  什么是webpack

 

webpack是一个JavaScript应用的静态模块打包工具。

 

从这句话中有两个要点，**模块**和**打包**需要关注。**grunt/gulp**都可以打包，那有什么区别。

 

> 模块化

 

webpack可以支持前端模块化的一些方案，例如AMD、CMD、CommonJS、ES6。可以处理模块之间的依赖关系。不仅仅是js文件可以模块化，图片、css、json文件等等都可以模块化。

 

> 打包

 

webpack可以将模块资源打包成一个或者多个包，并且在打包过程中可以处理资源，例如压缩图片，将scss转成css，ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。**grunt/gulp**也可以打包。

 

**和grunt/glup的对比**

 

- grunt/glup的核心是Task

  - 我们可以配置一系列的task，并且定义task要处理的事务（例如ES6/TS转化，图片压缩，scss转css）

  - 之后可以让grunt/glup来执行依次这些任务，让整个流程自动化

  - 所以grunt/glup也被称为前端自动化任务管理工具

- 看一个gulp例子

  - task将src下的js文件转化为ES5语法

  - 并输入到dist文件夹中

 

<pre>const gulp = require('gulp')

    const babel = require('gulp-babel')

    gulp.task('js'()=>

      gulp.src('src/*.js')

        .pipe(babel({

          presets:['es2015']

        }))

        .pipe(gulp.dest('dist'))

    );

</pre>

 

- 什么时候使用grunt/gulp呢？

  - 如果工程依赖简单，甚至没有模块化

  - 只需要进行简单的合并/压缩

  - 如果模块复杂，相互依赖性强，我们需要使用webpack

- grunt/glup和webpack区别

  - grunt/glup更加强调的是前端自动化流程，模块化不是其核心

  - webpack加强模块化开发管理，而文件压缩/合并/预处理等功能，是附带功能

 

webpack就是前端模块化打包工具

 

###   webpack的安装

 

1. webpack依赖node环境。

2. node环境依赖众多包，所以需要npm，npm（node packages manager）node包管理工具

3. nvm是node管理工具可以自由切换node环境版本

 

**全局安装webpack**

 

```shell

npm install webpack -g

//指定版本安装

npm install webpack@3.6.0 -g

```

 

> 由于vue-cli2基于webpack3.6.0

> 如果要用vue-cli2的可以使用`npm install webpack@3.6.0 -g`

 

**局部安装**

 

```shell

npm install webpack --save-dev

```

 

- 在终端执行webpack命令，使用的是全局安装。

 

- 当在package.json中定义了scripts时，其中包括了webpack命令，那么使用的是局部webpack