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

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

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

在这里插入图片描述

相关阅读:
软考备考-程序员-备考笔记
DB2 SQL Error: SQLCODE=-911, SQLSTATE=40001, SQLERRMC=2
使用Fiddler如何抓取手机上的包
【交叉编译】tslib库交叉编译
网络空间测绘——MQTT服务篇
华为云云耀云服务器L实例评测｜运行python脚本
android studio通过wifi、无线连接设备
html在线商城购物网站制作——基于HTML+CSS+JavaScript鲜花礼品电商网站
clickhouse-keeper简介及使用
容器化 Spring Boot 代码的 9 个技巧

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