webpack的安装和基本使用

webpack简介
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

webpack 基本使用
webpack 处理 JS 文件之间的相互依赖关系，可以在一个.js文件中引入另一个.js（比如第三方jquery库）文件，可以把多个外部脚本的引入写入同一个.js文件中，进行打包，只在.html中引入这一个打包文件就可。
webpack 能够处理 JS 兼容问题，把高级的浏览器不识别的语法（比如ES6等）转为低级的浏览器能识别的语法
不需要在 .html 文件中引入大量的静态资源（js css images 字体文件 模板文件），大量的静态资源会影响网页的加载速度，导致大量的二次请求。使用webpack可以很好解决这些问题

webpack是基于nodejs的，所以要使用webpack，需要安装nodejs。

安装完成后使用node -v 和 npm -v 查看版本号以确定是否安装成功。
1、安装 Node.js

2、本地安装

最新的webpack版本是： webpack v4.16.1

要安装最新的或者特定的版本，请运行以下命令之一：

npm install --save-dev webpack
npm install --save-dev webpack@
注意：如果使用的webpack 4+ 版本，还需要安装 cli,因为webpack 4将 cli 分离出来了

npm install --save-dev webpack-cli
3、全局安装

以下的 NPM 安装方式，将使 webpack 在全局环境下可用：

npm install --global webpack
通过 webpack -v查看已安装的版本，安装成功则会显示安装的版本

4、为项目添加依赖 node_modules

npm install webpack --save-dev

5.）进入项目生成 package.json 文件

npm init -y

6.命令行执行node build/build.js //npm run build
项目多出文件dist