webpack安装_webpack的安装和使用

9f231fdc9adf10d37afef50c5967389c.png

webpack官网:https://www.webpackjs.com/

简介

webpack是基于模块化的打包(构建)工具,它把一切视为模块。
它通过一个开发时态的入口模块为起点,分析出所有的依赖关系,然后经过一系列的过程(压缩、合并),最终生成运行时态的文件。webpack的特点:

- **为前端工程化而生**:webpack致力于解决前端工程化,特别是浏览器端工程化中遇到的问题,让开发者集中注意力编写业务代码,而把工程化过程中的问题全部交给webpack来处理。
- **简单易用**:支持零配置,可以不用写任何一行额外的代码就使用webpack。
- **强大的生态**:webpack是非常灵活、可以扩展的,webpack本身的功能并不多,但它提供了一些可以扩展其功能的机制,使得一些第三方库可以融于到webpack中。
- **基于nodejs**:由于webpack在构建的过程中需要读取文件,因此它是运行在node环境中的。
- **基于模块化**:webpack在构建过程中要分析依赖关系,方式是通过模块化导入语句进行分析的,它支持各种模块化标准,包括但不限于CommonJS、ES6 Module。

安装

webpack通过npm安装,它提供了两个包:

- webpack:核心包,包含了webpack构建过程中要用到的所有api。
- webpack-cli:提供一个简单的cli命令,它调用了webpack核心包的api,来完成构建过程。

安装方式:
- 全局安装:可以全局使用webpack命令,但是无法为不同项目对应不同的webpack版本。
- **本地安装**:推荐,每个项目都使用自己的webpack版本进行构建。

使用

打包命令:npx webpack

默认情况下,webpack会以```./src/index.js```作为入口文件分析依赖关系,打包到```./dist/main.js```文件中。

通过--mode选项可以控制webpack的打包结果的运行环境。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值