webpack安装

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
在webpack中，所有的静态资源都可以被处理为一个模块，包括js、图片、css、字体。模块化是前端开发的主要模式，模块化的好处有很多，我想到的有以下3种：
更轻松地拆分代码逻辑，对于大型工程尤其重要
更容易地去管理变量，模块会自动生成一个局部变量环境，减少全局变量的污染
显示地声明依赖关系，想想之前在head中引入很多script标签，由于script顺序错误而引起的bug
webpack支持多种模块使用方式，包括es6的module、CommonJS、AMD。推荐使用es6的module语法，一方面是因为它是标准，是以后模块化语法的主要使用方式；另一方面，是因为它是静态的，webpack可以依靠静态分析，做一些优化，比如Treeshaking。webpack自带js模块处理
功能，其他类型的静态资源我们需要通过配置相应的loader去处理。
从 webpack v4.0.0 开始，可以不用引入一个配置文件。然而，webpack 仍然还是高度可配置的。
webpack四个核心概念：
入口(entry)：工程的入口文件配置
输出(output)：打包的输出文件配置
loader：加载器，用于处理各种不同类型的模块，可扩展
插件(plugins)：插件：在webpack八宝过程中不同时机执行一些任务，比如清除打包目录，复制静态文件，抽取css文件等
webpack与gulp一样都是基于node.js安装的，所以需要先安装node.js
首先全局安装webpack

cnpm install webpack -g

全局安装webpack-cli（用于在命令行中运行webpack）

cnpm install webpack-cli -g

进入到项目里进行本地安装

cnpm init -y

执行此命令创建包文件package.json
在package.json配置如下参数；指定生产环境还是开发环境

命令行进行本地安装：
cnpm i webpack --save-dev
cnpm i webpack-cli --save-dev
然后输入webpack-v查看是否安装成功