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

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

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

在这里插入图片描述

相关阅读:
2M大小的PDF文档上传到LangChain-ChatGLM知识图谱中,大致需要的时间
API自动化测试利器-Postman详解
ThreeJS 几何体顶点position、法向量normal及uv坐标 | UV映射 - 法向量 - 包围盒
洛谷 P2183 [国家集训队]礼物）（扩展卢卡斯定理）
【02】数据类型-数据变量
DOM之事件对象
NX二次开发-调内部函数UGS::UICOMP_enum::set_width(int)更改BlockUI的枚举控件宽度
6款原型产品设计软件
ElasticSearch集群搭建及启动异常的问题
uniapp实现登录组件之外区域置灰并引导登录

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