1.搭建
1.创建文件夹:webpack初体验
F:\study\webpack\webpack初体验>npm init
package name: (webpack初体验) webpack_test
Is this OK? (yes) y
F:\study\webpack\webpack初体验>npm i webpack webpack-cli -g
F:\study\webpack\webpack初体验>npm i webpack webpack-cli -D //开发依赖
2.新建src文件夹以及build文件夹,在src文件夹下新建webpack的入口文件index.js
index.js输入代码
/*
* @Author: zyl
* @Date: 2021-06-22 10:23:24
* @LastEditors: zyl
* @LastEditTime: 2021-06-22 10:26:47
* webpack入口起点文件
*
* 1.运行指令
* 开发环境: webpack ./src/index.js -o ./build/built.js --mode=development
webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到./build/built.js整体打包环境,是开发环境
* 生产环境
*/
function add(x, y) {
return x + y;
}
console.log(add(1, 2));
3开发环境打包
执行命令的打包效果
打包之后进入文件夹,这里打包效果图呈现是main.js,查看main.js
3.1可以查看到末尾我们的入口文件
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./src/index.js"]();
/******/
/******/ })()
3.2可以通过eval文件查看打包的内容
eval("/*\r\n * @Author: zyl\r\n * @Date: 2021-06-22 10:23:24\r\n * @LastEditors: zyl\r\n * @LastEditTime: 2021-06-22 10:26:47\r\n * webpack入口起点文件\r\n * \r\n * 1.运行指令\r\n * 开发环境: webpack ./src/index.js -o ./build/built.js --mode=development\r\n webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到./build/built.js整体打包环境,是开发环境\r\n * 生产环境\r\n */\r\n\r\nfunction add(x, y) {\r\n return x + y;\r\n}\r\nconsole.log(add(1, 2));\r\n\r\n\n\n//# sourceURL=webpack://webpack_test/./src/index.js?");
4生产环境打包
生产环境:webpack ./src/index.js -o ./build/built.js --mode=production
webpack会以 ./src/index.js 为入口文件开始打包,打包后输出到./build/built.js整体打包环境,是生产环境
打包效果图
查看main.js的内容
console.log(3);
5通过node运行
5.1可以直接使用终端运行
F:\study\webpack\webpack初体验>node .\build\built.js\main.js
3
5.2也可以新建一个index,html引入对应的打包文件进行运行
<body>
<!-- 引入打包后的资源 -->
<script src="./main.js"></script>
</body>
效果是:
6.关于处理json文件
6.1src下面新建data.json文件
输入内容
{
"name":"zyl",
"age":18
}
6.2index.js的入口文件引入data,json文件
import data from './data.json'
console.log(data);
6.3执行开发环境的打包命令
6.4查看main.js文件可以查看到已经引入了对应的json文件
6.5页面查看引入的data.json文件,查看打印
7.新建index.css文件
编写代码
html,
body {
height: 100%;
background-color: pink;
}
7.1 index.js引入样式文件
import './index.css';
7.2 再一次打包
提示打包失败,查看main,js文件
发现抛出错误
说明无法处理css资源
总结:
- webpack能处理js/json资源,不能处理css/img等其他资源
- 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
- 生产环境比开发环境多一个压缩js代码。|