webpack的简单使用

最新推荐文章于 2024-09-01 16:36:19 发布

冷丁_

最新推荐文章于 2024-09-01 16:36:19 发布

阅读量273

点赞数 1

分类专栏： Vue精华讲解文章标签： webpack javascript 前端

本文链接：https://blog.csdn.net/qq_41359998/article/details/122960794

版权

Vue精华讲解专栏收录该内容

17 篇文章 1 订阅

订阅专栏

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("<h1>java ES6</h1>")
}

main.js导入hello中的方法。

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

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

2.创建webpack.config.js

module.exports={
  entry:'./modules/main.js',
  output:{
      filename:"./js/bundle.js"
  }
};

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="dist/js/bundle.js"></script>
</body>
</html>

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

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

在这里插入图片描述

冷丁_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
webpack的简单使用

webpack的简单实用什么是webpack本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。简单的来说，WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。demo完成一个demo ，简单测试一下webpack的打包功能。首先配置webpack环境Mac安装webp
复制链接

扫一扫

专栏目录