webpack的简单使用

webpack的简单实用

什么是webpack
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。

简单的来说，WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

demo

完成一个demo ，简单测试一下webpack的打包功能。

首先配置webpack环境

Mac安装webpack

在这里插入图片描述

建立一个vue项目

在这里插入图片描述

直接建一个文件夹即可，然后用IDEA打开。
1.简历modules文件夹
在modules文件夹中创建hello.js和main.js。
hello.js中用于暴露方法

//暴露一个方法
exports.sayHi=function (){
    document.write("java ES6
")
}
1
2
3
4

main.js导入hello中的方法。

var hello=require("./hello");
hello.sayHi();
1
2

注意，上面是ES5的写法，ES6用export导出，import导入

2.创建webpack.config.js

module.exports={
  entry:'./modules/main.js',
  output:{
      filename:"./js/bundle.js"
  }
};
1
2
3
4
5
6

3.在终端输入webpack命令进行打包
在这里插入图片描述
打包成功后会出现js目录

4.新建一个index.html文件
导入刚刚打包好的js文件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<script src="dist/js/bundle.js">script>
body>
html>
1
2
3
4
5
6
7
8
9
10

运行后的结果
在这里插入图片描述

如果对您有帮助，免费的赞点一个～～～感谢🙏

在这里插入图片描述

相关阅读:
齐岳定制|二苯基环辛炔-聚乙二醇-丙烯酸酯|DBCO-PEG-Acrylates|DBCO-PEG-ACRL
基于信通院 Serverless 工具链模型的实践：Serverless Devs
FFmpeg转换器分析-基础篇
SDL2.0播放YUV格式视频
合成孔径雷达地面运动目标检测技术研究——基于概率图（Matlab代码实现）
Numpy数据类型
.NET周报【10月第2期 2022-10-17】
侧面多级菜单（一个大类、一个小类、小类下多个物体）
VSCode使用简介
448. 找到所有数组中消失的数字

原文地址：https://blog.csdn.net/qq_41359998/article/details/122960794