您的位置:首页 >> Vue >> 《和小米一起学Vue.js》— webpack基础使用

《和小米一起学Vue.js》— webpack基础使用

[ 孤狼 | 2022-07-30 01:48:15 | Vue | 148°C | 0条评论 ]

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。webpack 是代码编译工具,有入口、出口、loader 和插件。当 webpack 处理应用程序时,它会在内部构建一个依赖图(dependency graph),此依赖图对应映射到项目所需的每个模块,并生成一个或多个 bundle。

webpack是一个nodejs的程序,所以使用时需要安装nodejs。webpack打包完成的app程序是无需node运行环境的(除非就是node相关的项目),可以直接放到服务器运行。

TIP:如果只是单页面使用vue,或者很少部分使用vue,无需打包,直接在界面实现即可,如果是整体vue项目,需要使用webpack最后打包成项目文件。


安装nodejs

下载地址:http://nodejs.cn/download/

安装完成之后,打开命令行,输入 node -v 查看是否安装成功





本地(当前命令所在目录)安装webpack

命令行输入

npm install --save webpack  //最新版(生产环境)
npm install --save webpack@ //指定版本(生产环境)

npm install --save-dev webpack //最新版(开发环境)
npm install --save-dev webpack@ //指定版本(开发环境)

npm install webpack-cli //命令行调用,不装找不到命令

注意:安装目录为当前命令行所在目录,并非nodejs目录。安装完成之后,会在当前目录(命令行所在目录)下创建node_modules文件夹保存文件。 不推荐全局安装,避免版本冲突。



基本使用

webpack可以自动打包代码到指定的目录,一般项目中,代码文件放在src文件夹中,最后输出的文件放在dist文件夹中。使用

npx webpack --entry 主入口js --output-path 输出目录

命令来打包程序,webpack会自动处理js之间的引用关系,汇总合并输出。同时webpack也可以处理其他引用语句,处理es6之外的其他应用方式也会被自动处理。

新建一个项目文件夹 app ,并创建 src dist 两个文件夹,在 app 文件夹下创建 index.html 文件,并在app文件夹下打开命令窗口,输入 npm install --save-dev webpack app文件夹下安装webpack。在 src 目录下新建2个js文件, main.js func.js ,其中 main.js 作为主入口文件。


index.html文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<script src="./dist/main.js"></script>
</body>
</html>


main.js文件

import * as a from "./func"
//webpack会自动识别并补全func.js
console.log(a.add(1,5));
a._aaa();


func.js文件

export function add(n1,n2){
return n1+n2;
}
export function _aaa(){
console.log('成功运行');
}


写完代码之后,在命令框运行

npx webpack --entry ./src/main.js --output-path ./dist

这样就会把以 /src/main.js 为主入口的所有引用到的文件都打包到 /dist/main.js 。在index.html中引用/dist/main.js即可运行  


代码下载

下载地址:  密码:g9r1



转载请注明出处:http://gl.paea.cn/n.php?n=181
 
如您看得高兴,欢迎随意投喂,让我们坚持创作!
赞赏一个鸡腿
还没有人留下遗迹
综合 · 搜索