webpack基础入门

知识技术 2022-04-22 23:17 688
转载请务必注明: 来源:《建站管家》https://www.df81.com/news/293.html

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。是简单易使用的模块化打包工具,如何使用呢?
注意webpack版本

前提是本地已布置node环境,那么第一步,全局安装webpack模块。终端输入

'cnpm install webpack -g'。
202204222323546525


接着继续全局安装webpack-cli模块。终端输入

'cnpm install webpack-cli -g'。

这里需要注意,如果你的webpack版本是4以下,忽略此步,因为4以上将这两个模块分离了。
202204222324294374

在项目所要在的目录下创建 app 目录,可以终端'mkdir app'或者手动创建。
202204222325006307

在app目录下新建index.html,内容如下

<html>    
<head>        
<meta charset="utf-8">    
</head>    
<body>        
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>    
</body> 
</html>



继续在app目录下新建work1.js,内容如下

document.write("It works.");



下面就是使用 webpack 命令来打包work.js文件了。

在终端输入'webpack work1.js -o bundle.js --mode development'。

注意这是webpack4以上的命令,4以下直接'webpack work1.js bundle.js'即可。
202204222325342965

成功打包,终端中会显示成功信息,如上图框中显示。接下来打开index.html看到正确显示内容。


点赞 (0)

收藏 (0)

本站部分信息来源网络,如有侵权,请联系QQ:1062129401删除。

上一篇: 《建站管家》二次开发文档

下一篇: webpack4.x打包方法

请先登录后,再发表评论 ~ ~
发表评论
发表评论
发表帖子
广告位招租( ¥5 / 天 )
点击咨询
相关帖子

如果要判断文件是否存在,用函数 is_file(),如果要判断目录是否存在,用函数 is_dir()
用宝塔安装TP程序后,网站前台可以访问,后台无法访问,不是程序问题,而是web服务器环境配置问题(PHP配置),出现这种问题,一般是windows主机安装宝塔造成的,linux安装宝塔不会出现此错误
广告位招租( ¥3 / 天 )
点击咨询
广告位招租( ¥2 / 天 )
点击咨询
广告位招租( ¥1 / 天 )
点击咨询
最新帖子

小朋友,你爸爸是谁啊?这很单纯的,就像我们碰到别人会问:你吃过饭了吗?类似;许多人初次相识,经常会问:你是做什么的啊?你做什么,好像决定你收入的高低,你,资产的范围
1、升级框架到ThinkPHP8.0.3【要求PHP8.1+环境,推荐PHP8.1】 2、启用/禁用调试模式等小细节改进
后台点击生成站点地图 一直转圈圈没有反应,
在线客服