webpack 简单了解

本文介绍了 Webpack 的基本概念及使用方法,包括全局安装、配置文件设置等,并提供了简单的实战案例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.什么是webpack?

    打包,压缩各种静态资源的工具

2.目的?

    性能优化,

    减少浏览器向服务器请求次数

    节约服务器的带宽资源

3. 如何使用?

webpack是基于node.js 的,是运行在node.js环境下的,可以将各种静态资源整合在一起,

首先:全局安装webpack 

        npm i -g webpack

        npm init -y

        npm i webpack@3.6.0 -   D

  然后,在package.json文件中会出现一个scripts的配置命令

           可以这样配置:

        

     --wacth: 监听的意思

           当要被打包的文件一发生改变不用手动输入命令  npm  run build   就会自动产出

配置的简单写法:

这样写要配合 文件 (webpack.config.js)

里面内容写法为:

我们需要用到哪一个就要去下载他的命令

在package.json 中有这个版本:

然后,就可以在入口文件中导入我们需要的文件了

打包后的文件会经过上面的处理生成,我们需要引入页面的文件:这个时候就要在页面引入

ok 以上就是简单实用webpack 的使用方法以及简单介绍,有用就去pick  点赞吧!微笑微笑微笑

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值