webpack是现代JS应用程序的静态模块打包器module bundler，当webpack处理应用程序时，会递归地构建一个依赖关系图denpendency graph，其中包含应用程序需要的每个模块，然后将这些模块打包成一个或多个bundle。
安装部署
安装版本： webpack 4.x
操作步骤：
- 创建工程目录
- 初始化工程
- 全局安装
webpack和webpack-cli - 配置脚本
注意事项：
-
webpack-cli必须全局安装否则无法使用webpack指令 -
webpack必须全局安装否则也不能使用webpack指令 -
webpack4.x中的配置文件webpack.config.js不是必须的 -
webpack默认入口文件为./src/index.js，需手工建立。 -
webpack默认输出文件为./dist/main.js，打包后将自动生成。
# 检查环境
$ node -v
v8.1.2
$ npm -v
5.3.0
全局安装webpack及脚手架
# 全局安装webpack与webpack-cli，可在任何目录中通过CLI使用webpack命令。
$ npm i webpack webpack-cli -g
# 查看版本
$ webpack -v
4.12.0
安全安装后将会在Windows系统中C:\Users\yourname\AppData\Roaming\npm\node_modules目录下创建webpack与webpack-cli目录，存放全局安装的webpack与webpack-cli模块。
创建项目
# 创建目录
$ mkdir projects && cd projects
$ mkdir demo && cd demo
# 初始化项目，生成package.json，即使用npm管理项目中的包。
$ npm init -y
# 自动生成package.json文件
$ npm init
# 开发环境安装webpack，执行当前项目的构建，为项目添加webpack依赖。
# 本地安装webpack，会将依赖写入package.json中。
$ npm i webpack --save-dev
# 简写方式
$ npm i webpack -D
# 在项目中本地安装webpack-cli，注意-D只是--save-dev的简写。
$ npm i webpack-cli -D
不推荐安全安装webpack，它会锁定webpack到指定版本，在使用不同webpack版本的项目中可能会导致构建失败。
在项目使用npm首先会在本地模块中寻找webpack。
# package.json
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit/specs",
"build": "node build/build.js"
},
本地安装webpack后，node_modules/.bin/webpack是它的二进制程序。
webpack 打包
- webpack4.x是以项目根目录
./src/index.js目录作为入口，需手工建立。 - webpack4.x不再使用
webpack file1 file2的方式，而是直接运行webpack --mode development或webpack --mode production进行打包。
# 创建项目根目录与默认入口文件
$ mkdir src && cd src
$ vim index.js
# 默认进行打包，入口文件为./src/index.js，输出路径为./dist/main.js
$ webpack --mode development
$ webpack --mode production
配置npm命令便捷执行打包
# 配置快捷命令，执行npm run dev相当于webpack --mode development，执行npm run build相当于webpack --mode production。
$ vim package.json
"scripts": {
"dev":"webpack --mode development",
"build":"webpack --mode production"
},
# 重新安装
$ npm i
参数配置
webpack是高度可配置的，先了解四个核心概念：入口（entry）、输出（output）、加载器（loader）、插件（plugins）
入口（entry）
入口点（entry point）是webpack应该使用哪个模块，来作为构建内部依赖的开始。进入入口点后，webpack会找出有哪些模块和库的入口起点。
每个依赖项随即被处理，最后输出到称之为bundles的文件中。可通过wepack配置中配置entry属性，来指定一个入口起点。
