Vue系列教程(16)- 模块打包器(webpack)

简介: Vue系列教程(16)- 模块打包器(webpack)

1. 引言

通过前面的章节,我们已经学会了Vue的事件内容分发,有兴趣的同学可以参阅下:

Vue的基础知识至此基本已经学完了,接下来主要学习Vue项目的打包方式,即本文讲的webpack

2. 什么是webpack

Webpack是当下最热门的前端资源模块化管理和打包工具, 它可以:

  • 将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。
  • 还可以将按需加载的模块进行代码分离,等到实际需要时再异步加载。
  • 通过loader转换, 任何形式的资源都可以当做模块, 比如Commons JS、AMD、ES 6、CSS、JSON、Coffee Script、LESS等;

Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler) 。当Webpack处理应用程序时, 它会递归地构建一个依赖关系图(dependency graph) , 其中包含应用程序需要的每个模块, 然后将所有这些模块打包成一个或多个bundle。(类似于Maven

伴随着移动互联网的大潮, 当今越来越多的网站已经从网页模式进化到了WebApp模式。它们运行在现代浏览器里, 使用HTML 5、CSS 3、ES 6等新的技术来开发丰富的功能, 网页已经不仅仅是完成浏览器的基本需求;WebApp通常是一个SPA(单页面应用) , 每一个视图通过异步的方式加载,这导致页面初始化和使用过程中会加载越来越多的JS代码,这给前端的开发流程和资源组织带来了巨大挑战。

前端开发和其它开发工作的主要区别:

  • 首先是前端基于多语言、多层次的编码和组织工作
  • 其次前端产品的交付是基于浏览器的,这些资源是通过增量加载的方式运行到浏览器端

如何在开发环境组织好这些碎片化的代码和资源,并且保证他们在浏览器端快速、优雅的加载和更新,就需要一个模块化系统,这个理想中的模块化系统是前端工程师多年来一直探索的难题。

3. webpack安装

1.安装打包工具

sudo npm install webpack -g

2.安装客户端

sudo npm install webpack-cli -g

验证是否成功(如果有如下提示,安装成功):

4. webpack项目案例

4.1 创建webpack项目

①创建webpack项目,即文件夹(webpack-demo

vscode导入项目:

③创建一个名为modules的目录(用来放置JS模块等资源文件):

④ 在modules下创建模块文件Hello.js,并写入内容:

//暴露一个方法:sayHi
exports.sayHi = function () {
    document.write("<div>Hello Webpack</div>");
}

⑤ 在modules下创建一个名为main.js的入口文件:

//require 导入一个模块,就可以调用这个模块中的方法了
var hello = require("./hello");
hello.sayHi();

⑥在项目根目录下创建webpack.config.js配置文件:

代码如下:

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

4.2 打包

打开控制台 Terminal-> new Terminal,并输入命令webpack:

打包成功,并在项目目录可以看到生成以下目录及文件(bundle.js就是打包后好的js文件):

其它:命令行输入webpack --watch 代码发生变动,会自动重新打包

4.3 使用打包后的js文件

①在项目根目录下创建HTML页面:

完整代码如下:

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

②运行页面,效果如下:

4.4 小结

webpack相当于就是多个模块化的文件合并为一个js文件(这些打包后的文件经过处理,便可以向下兼容如ES5),最后我们可以把生成的js文件在html里直接引入。本文完!

目录
相关文章
|
1月前
|
JavaScript
Vue状态管理:在Vuex中,什么是模块(module)?
Vue状态管理:在Vuex中,什么是模块(module)?
23 1
|
1月前
|
JavaScript 前端开发
Vue使用Element实现增删改查+打包
Vue使用Element实现增删改查+打包
17 0
|
2月前
|
人工智能 JavaScript 前端开发
vue打包如何开启gzip压缩
vue打包如何开启gzip压缩
|
2月前
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
webpack 使用打包报错 ERROR in node_modules\@types\node\ts4.8\assert.d.ts
45 0
|
21天前
|
JavaScript 前端开发
总结 Vue3 的一些知识点:Vue3 项目打包
总结 Vue3 的一些知识点:Vue3 项目打包
|
19天前
|
前端开发 JavaScript API
极简运行Vue打包文件:让你的网页快速启动,高效展现!
欢迎来到前端入门之旅!这个专栏是为那些对Web开发感兴趣、刚刚开始学习前端的读者们打造的。无论你是初学者还是有一些基础的开发者,我们都会在这里为你提供一个系统而又亲切的学习平台。我们以问答形式更新,为大家呈现精选的前端知识点和最佳实践。通过深入浅出的解释概念,并提供实际案例和练习,让你逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是最新的前端框架和工具,我们都将为你提供丰富的内容和实用技巧,帮助你更好地理解并运用前端开发中的各种技术。
|
22天前
|
缓存 JavaScript 开发工具
【安装指南】VSCode搭建运行Vue的详细教程
【安装指南】VSCode搭建运行Vue的详细教程
32 0
|
24天前
|
前端开发 JavaScript 测试技术
Vue3+Vite+TypeScript常用项目模块详解(下)
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
|
24天前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
Vue3+Vite+TypeScript常用项目模块详解
|
1月前
|
前端开发 JavaScript 开发者
webpack打包机制,构建过程和配置
webpack打包机制,构建过程和配置
11 0

相关产品

  • 云迁移中心