3 ---＞ webpack初体验

最新推荐文章于 2024-08-08 22:20:54 发布

ZhaoYulin6

最新推荐文章于 2024-08-08 22:20:54 发布

阅读量113

点赞数

文章标签： webpack

本文链接：https://blog.csdn.net/ZhaoYulin6/article/details/118104782

版权

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代码。|

ZhaoYulin6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
3 ---＞ webpack初体验

1.搭建1.创建文件夹：webpack初体验F:\study\webpack\webpack初体验>npm initpackage name: (webpack初体验) webpack_testIs this OK? (yes) yF:\study\webpack\webpack初体验>npm i webpack webpack-cli -gF:\study\webpack\webpack初体验>npm i webpack webpack-cli -D //开发依赖2.新建
复制链接

扫一扫