webpack的基础使用

1.简介

webpack是一个现代的js应用的静态模块打包工具。
■打包如何理解呢?

理解了webpack可以进行模块化,并且处理模块间的各种复杂关系后,打包的概念就非常好理解了。
就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
并且在打包的过程中,还可以对资源进行处理比如压缩图片,将scss转成css ,将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作
但是打包的操作似乎grunt/gulp也可以帮助我们完成,它们有什么不同呢?

前端模块化

■前端模块化:

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

理解打包

■如何理解——打包：（webpack的作用）

1. webpack可以进行模块化,并且处理模块间的各种复杂关系。
2. 将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。
3. 并且在打包的过程中,还可以对资源进行处理比如压缩图片,将scss转成css ,将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作
4. loader …

安装

安装webpack首先需要安装Node.js , Node.js自带了软件包管理工具npm
查看自己的node版本:

node -v

全局安装webpack(这里我先指定版本号3.6.0 ,因为vue cli2依赖该版本)

npm install webpack@3.6.0 -g

局部安装webpack (后续才需要)
–save-dev 是开发时依赖,项目打包后不需要继续使用的。
cd对应目录

npm install webpack@3.6.0 --save -dev

为什么全局安装后,还需要局部安装呢?
webpack --version 检查有没有安装
在终端直接执行webpack命令,使用的全局安装的webpack
当在package.json中定义了scripts时,其中包含了webpack命令,那么使用的是局部webpack

起步

文件和文件夹解析:

• src文件夹:用于存放我们写的源文件。
• main.js :项目的入口文件。具体内容查看下面详情。
• mathUtils.js :定义了一些数学工具函数,可以在其他地方引用,并且使用。
• index.html :浏览器打开展示的首页html
• package.json :通过npm init生成的, npm包管理的文件(暂时没有用上,后面才会用上)