Vue Webpack使用

什么是Webpack？

　　webpack是一个现代js应用程序的静态模块打包器，当webpack处理应用程序时，它会递归地构建一个以来关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

服务器端的NodeJS遵循CommonsJS规范，该规范核心思想是允许模块通过require方法来同步加载所需要以来的其他模块，然后通过exports或module.exports来导出需要暴露的接口。

ES6模块

EcmaScript6 标准增加了 js语音层面的模块体系定义。es6模块的设计思想，是尽量静态化，使编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonsJS和AMD模块，都只能在运行时确定这些东西。

优点

  • 容易进行静态分析
  • 面向未来的es标准

缺点

  • 原生浏览器端还没有实现该标准
  • 全新的命令，新版的NodeJS才支持

实现

  • Babel

安装Webpack

Webpack 是一款模块加载器兼打包工具，它能把各种资源，如JS、JSX、ES6、SASS、LESS、图片等都作为模块来处理和使用。

安装：

npm install webpack -g
npm install webpack-cli -g

测试安装成功：

webpack -v
webpack-cli -v

 

 

 使用webpack

1.创建项目

　　创建一个空文件夹，用IDEA工具打开。

　　

2.创建一个名为 modules的目录，用于放置JS模块等资源文件

　　

3.在modules下创建模块文件，如：hello.js,用于编写JS模块相关代码。

//暴露一个方法
exports.sayHi=function () {
    document.write("<h1>ES6</h1>")
};

4.在modules下创建主模块文件，如：main.js,用于调用hello.js的方法。

var hello=require("./hello");//引用一个组件
hello.sayHi();

5.创建webpack.config.js打包文件，并配置程序入口和输出出口

module.exports={
    entry:'./modules/main.js',//程序入口
    output:{//输出
        filename:"./js/bundle.js"
    }
};

 

 

 

6.在 Terminal 中输入打包命令，打包所有JS 成为一个bundle.js

webpack

7.新建index.html 测试打包后的bundle.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>
复制代码

 

 

 

 

posted @   创客未来  阅读(190)  评论(0)  编辑  收藏  举报
编辑推荐：
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示