本文详细介绍了Webpack的安装、默认功能、配置要点以及注意事项。通过全局或局部安装Webpack及CLI，实现JavaScript和JSON文件的处理。Webpack在开发环境与生产环境下的打包差异主要在于压缩。配置文件遵循CommonJS规范，而项目代码可使用ES6。此外，还提到了Loader的使用，它针对不同文件类型设置规则。
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，分开处理；
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
