webpack(四):webpack配置

4.1入口和出口
4.2局部安装webpack

4.1入口和出口

  如果每次使用webpack的命令都需要写上入口和出口作为参数,就非常麻烦,有没有一种方法可以将这两个参数写到配置中,在运行时,直接读取呢?
  当然可以,就是创建一个webpack.config.js文件(文件名字固定,不能随便取)
在这里插入图片描述
webpack.config.js文件内容:
在这里插入图片描述
path需要动态获取路径,这里要用到node的语法,首先要导出path的模块,会去node的包里面找这个path的包
在这里插入图片描述
当前项目还没有依赖这些包,所以要装这些包。要用到node的东西,就要对它先进行初始化。
在当前项目的路径下使用该命令:npm init
在这里插入图片描述
接下来修改下面的属性值。
在这里插入图片描述
生成下图所示:
在这里插入图片描述
回车,在项目生成了package.json文件
在这里插入图片描述
如果package.json里面还依赖其他东西的话,还要执行npm install,在当前文件夹安装一些东西。这里没有依赖其他,所以这里执行没效果。
在这里插入图片描述
现在的话,就会去全局里面找这个path的包
在这里插入图片描述
path模块下的resolve函数:用于对两个路径进行拼接,
__dirname:node上下文里面自带的一个全局变量,保存的是当前webpack.config.js文件所在的路径
在这里插入图片描述
这样,入口和出口(动态获取路径)定义好之后,直接使用webpack命令打包,不用再跟入口和出口参数。
在这里插入图片描述
但是,在开发中一般不直接使用webpack,使用npm run build,怎么将webpack与npm run build映射起来呢。
在package.json文件,scripts下创建"build": “webpack”
在这里插入图片描述

4.2局部安装webpack

注意:这里使用npm run build命令,相当于执行了webpack,但是与直接在终端上输webpack命令不同的是:
npm run build会优先使用这个项目webpack的版本,局部webpack。如果没有找到,会使用全局webpack。
终端上直接输webpack会使用全局webpack
比如:你使用了别人的项目,别人的webpack是1.0版本,你自己安装的全局webpack版本是2.0版本,这个时候,你直接使用webpack命令打包会出现问题。所以通常一个项目,都有自己局部的webpack。
第一步,项目中需要安装局部webpack,这里局部安装webpack3.6.0
npm install webpack@3.6.0 –save -dev
在这里插入图片描述
安装完了之后,项目多了一个文件夹,node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹
在这里插入图片描述
在package.json文件中:
在这里插入图片描述
再使用npm run build,就会用到了局部webpack打包。
参考文档

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值