webpack操作基础
webpack 是一个前端加载/打包工具,根据模块的依赖关系进行静态分析,并依根据规则生成对应的静态资源
安装温pack之前本地环境必须是已经安装node.js,然后按照下列步骤进行安装
查看本地是否已经安装Node.js
说明已经安装成功 版本是:6.4.1
Mac系统 加sudo
=====安装成功了,我们开始创建项目了
mdkir wpk-test 是创建一个文件夹wpkk-test文件
项目文件夹创建成功
需要绑定或者捆绑文件
新的文件bundle.js 诞生了
bundle里面写个内容,把他通过show来打印出来
多文件打包:
只是绑定一个作用不大,如果是很多文件怎么绑定,怎么依赖呢(打包)?下面是打包多个文件::
再打包一下:
再擦启动页面:
打包成功
函数打包:
能不能通过函数来打包:(json和函数不一样,函数可以实现功能)
再次打包
打印页面:
通过函数功能来打包
样式的打包:
我们引入其他的加载器来打包一下样式文件:
有两种加载器:
css-loader---遍历文件代码:
style-loader--通过style标签引入到head头部部分:
注意下循序:1-style 2-css 如果循序换了就会报错
把样式绑定到js文件里面去:
初始化一下整个项目:
再新建一个json文件
新的json文件成功了:
再安装一下加载器:
写样式:
新建css文件:![]()
show.js文件![]()

再遍历项目:
配置文件:
下面是天剑webpack项目添加webpack.config.js配置
新建src文件:
index文件修改![]()

遍历项目:
修改成功:
如果需要改css样式的化 在css文件进行修改,再遍历项目启动就可以了 (cmd 输入:webpack 回车就可以)
安装第三方库:
服务端环境的安装:
json文件添加
HTML文件修改
启动项目 buld
安装-dev-server
通过8081端口打开:
再npm start 进行启动
本文作者:Mahmud(مەھمۇد)
本文链接:https://www.cnblogs.com/mahmud/p/10087603.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!