webpack 读取文件夹下的文件_初识webpack

webpack是基于模块化的打包(构建)工具,通过一个入口文件递归出所有模块的依赖关系,经过一系列的过程(压缩,合并),最终生成运行的代码。

webpack的特点

解决工程化问题(只关注开发时的代码,把工程化过程中的问题交给webpack处理)

简单易用:支持0配置

强大生态:可以融入第三方库

基于nodeJs:webpack构建的过程是运行工在node环境中的,因为需要本地读取文件,分析依赖关系,并且生成打包后的文件,而在浏览器端是做不到读取文件和生成文件的。

基于模块化:webpack打包是根据特殊导入导出语句分析依赖关系进行打包

webpack的安装

通过npm install安装 webpack ,webpack-cli

webpack:核心包,包含webpack构建过程中要用到的所有api

webpack-cli:提供一个简单的cli命令来调用webpack核心包的api,来完成构建过程

安装推荐使用本地安装,使每个项目都使用自己的webpack版本进行构建

npm install -D webpack webpack-cli

webpack使用

webpack默认从src文件夹下的index.js读取入口文件,打包到dist文件夹下的的main.js中

设置开发环境和生成环境

"scripts": {

"dev": "webpack --mode=development",

"build":"webpack --mode=production"

},

初识webpack

标签:初识 pts 默认 文件夹 生成文件 读取 -- 环境 构建

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

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值