介绍
webpack是一个前端的静态资源打包工具，能让浏览器也支持模块化。它将根据模块的依赖关系 进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
官网：https://webpack.docschina.org/
webpack的作用有下面几点：
webpack核心主要进行javascript资源打包。
- 它结合其他工具， 将多种静态资源css、png、sass分类转换成一个个静态文件，这样可以减少页面的请求。
- 可集成babel工具实现EcmaScript 6 转 EcmaScript 5 ，解决兼容性问题。
- 可集成http服务器。
- 可集成模块热加载，当代码改变后自动刷新浏览器等等功能。
安装
全局安装：
不推荐全局安装webpack，全局安装的webpack，在打包项目的时候，使用的是你安装在自己电脑上的webpack，如果项目到了另一个人的电脑上，他可能安装的上旧版本的webpack，那么就可能涉及到兼容性的问题。而且他如果没有在全局安装webpack就无法打包。
# 安装最新版本 npm install --global webpack # 或者 安装特定版本 npm install --global webpack@<version>
如果上面安装的是 webpack v4+ 版本, 还需要安装 CLI , 才能使用 webpack 命令行
npm install --global webpack-cli
可通过 npm root -g 查看全局安装目录
如果安装后，命令行窗口 webpack 命令不可用，则手动配置 全局目录的 环境变量
我的电脑 -> 右键属性 -> 高级系统设置 -> 高级 -> 环境变量 -> 系统变量 -> path ->在末尾添加上面的路径，记得前面用 ; 分号隔开
然后再重新打开 cmd 命令行窗口，输入 webpack -v 即可使用
全局安装 webpack@v4.35.2 与 webpack-cli@3.3.6
npm i -g webpack@v4.35.2 npm i -g webpack-cli@3.3.6
安装后查看版本号。如果有红色字提醒，没关系忽略它
webpack -v
简单使用
新建目录结构如下：
在webpack-demo2目录下执行下面代码打包js文件
E:\vue\npm-demo\webpack-demo2>webpack ./src/main.js -o ./dist/bundle.js
./dist/bundle.js表示将所有的js文件打包在dist目录下的bundle.js文件中，./src/main.js是所有js的入口文件
webpack.config.js
每当修改js文件内容后，都要webpack重新打包，打包时要指定入口和出口比较麻烦，可通过配置解决
在 webpack-demo2 目录下创建 webpack.config.js 配置文件，该文件与 src 处于同级目录
在webpack.config.js里写如下配置
// 引入node中的path模块，处理文件路径 的小工具 const path = require('path') // 导出一个webpack具有特殊属性配置的对象 module.exports = { mode: 'none', // 指定模式配置："development" | "production" | "none" // 入口 entry: './src/main.js', // 入口模块文件路径 // 出口 output: { // path: './dist/', 错误的，要指定绝对路径 path: path.join(__dirname, './dist/'), //打包的结果文件生成的目录要是绝对路径 filename: 'bundle.js' } }
然后就可以执行下面的命令进行打包了，不需要再输入入口和出口了
webpack
如果没有mode参数，则会出现黄色警告。
本地安装
本地安装的时候，建议把webpack安装到devDependencies 开发依赖 ( --save-dev ) 中，因为 webpack 只是一个打包工具，项目如果需要上线，上线的是打包的结果，而不是这个工具。
所以我们为了区分生产环境和开发环境依赖，通过 --save （生产环境）和 --save-dev （开发环境）来区分。
为了测试本地安装，先把全局安装的 webpack 和 webpack-cli 卸载掉
npm uninstall -g webpack npm uninstall -g webpack-cli
在webpack-demo2中，使用npm init -y 初始化，会生成一个package.json的文件，后面要用到。
本地安装命令
# 安装最新版本 npm install --save-dev webpack # 安装特定版本 npm install --save-dev webpack@<version>
如果上面安装的是 webpack v4+ 版本, 还需要安装 CLI , 才能使用 webpack 命令行
npm install --save-dev webpack-cli
# 1. 进入到 webpack-demo2 cd e:\vue\npm-demo\webpack-demo2 # 2. 初始化项目 `-y` 是采用默认配置 npm init -y # 3. 安装 v4.35.2 ，不要少了 v npm i -D webpack@v4.35.2 # 安装 CLI npm i -D webpack-cli@3.3.6
安装完执行webpack -v会报错
在本地安装的 webpack ，要通过在项目文件夹下 package.json 文件中的 scripts 配置命令映射
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "show": "webpack -v", "start": "node ./src/main.js", "build": "webpack" },
然后查看版本号就使用下面的命令
npm run show
运行 main.js 模块：
npm run start
注意：如果命令映射的别名是 start ，可省略 run 进行简写执行，即：
npm start
打包构建
npm run build
自动打包
前面我们修改了代码之后，都要手动打包，这样很浪费我们的时间，那我们想当我们修改了代码之后能不能自动帮我们完成打包，答案当然是可以的，只需要在package.json的script里加上watch参数就可以了
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "show": "webpack -v", "start": "node ./src/main.js", "build": "webpack", "watch": "webpack --watch" // 加上这个就可以自动帮我们打包了 },
添加上watch参数之后，在命令行执行npm run watch，程序会阻塞状态，当我们更改代码之后，自动会帮我们完成打包
导入导出模块
上面我们的webpack-demo2下有个src文件夹，里面有两个js文件，一个是bar.js，一个是main.js。main.js是主入口，引用了bar.js文件，既然要用到bar.js里的，那我们就要在bar.js里导出，然后再main.js里导入
导出默认成员
默认成员只能有一个，要不然会报错。
export default 成员
bar.js
// ES6 注意 一个模块文件中，只能导出一个默认成员，注释掉一个 export default function() { // 导出函数 console.log('我是bar模块--ES6') } export default { // 导出对象 name: '邹邹' }
要在main.js文件里使用bar.js文件里的内容，还要在main.js里导入
main.js
// Es6 导入默认成员 import bar from './bar' bar() // 调用函数 console.log(bar) console.log(bar.name) // 对象的属性值
导出非默认成员
默认成员只能导出一个，非默认成员可以导出多个。
非默认成员必须要有成员名称
bar.js
// ES6 可以导出多个非默认成员 export const x = 'xxx' export var y = 'yyy' export function add (a, b) { return a+b } // export z = 'zzz' 错误的，没有数据类型 // export 'wwww' 错误的，没有变量名和类型 // export function (x, y) { 错误的，没有函数名 // return x+y // }
main.js
// Es6 导入非默认成员 // 通过 解构赋值 的方式 来加载成员 // x 对应的是bar.js 模块中的 x 成员 ，y对应y成员，ad对应add成员 函数 import {x, y, add} from './bar' console.log(x, y, add(10, 20)) // 通过解构赋值按需导入你需要的成员 import {x, y} from './bar' console.log(x, y) // 会将默认成员 与 非默认成员 全部导入 import * as bar2 from './bar' console.log(bar2, bar2.x, bar2.y, bar2.add(1,2))
