【webpack】wabpack4.x知识回顾

1、安装

全局安装： npm i webpack@4.41.6 webpack-cli@3.3.11 -g
默认安装到npm的目录下node_modules中
C:\Users\Administrator\AppData\Roaming\npm\node_modules

局部安装： npm i webpack@4.41.6 webpack-cli@3.3.11 -D
安装在当前文件夹的node_modules中

是否可用：webpack-cli --version
webpack --version

2、默认功能：生产环境、开发环境

webpack ./src/index.js -o ./build/built.js --mode=development //不写默认production
-o：输出

• 可处理：js、json文件
• 生产环境比开发环境打包多了压缩；
• 能将es6模块化编译为浏览器可识别的模块化，即import可以使用；（其他是es6语法但不是模块化作用的如let、const等就默认不转为es5了）

3、注意点

• 配置文件基于node.js，使用commonJS规范；
• 项目代码中可以使用ES6规范（最终编译后也是转为commonJS规范）
• 简言之：用于配置打包的必须用commonJS导入导出规则，被打包的文件可以使用ES6规范；

4、一些node.js变量

• _dirname：动态获取当前js文件所处的文件夹绝对路径C:/nodejs/06/code；
• _filename：动态获取当前js文件的绝对路径C:/nodejs/06/code/app.js

5、loader介绍

• 不同文件需要各自配置规则；如css\less，分开处理；