Webpack配置

2022-05-28 17:42:24 浏览数 (1)

Webpack配置

入口和出口

我们考虑一下,如果每次使用webpack的命令都需要写上入口和出口作为参数,就非常麻烦,有没有一种方法可以将这两个参数写到配置中,在运行时,直接读取呢?

当然可以,就是创建一个webpack.config.js文件

局部安装webpack

目前,我们使用的webpack是全局的webpack,如果我们想使用局部来打包呢?

因为一个项目往往依赖特定的webpack版本,全局的版本可能很这个项目的webpack版本不一致,导出打包出现问题。

所以通常一个项目,都有自己局部的webpack。

第一步,项目中需要安装自己局部的webpack

这里我们让局部安装webpack3.6.0

Vue CLI3中已经升级到webpack4,但是它将配置文件隐藏了起来,所以查看起来不是很方便。

第二步,通过node_modules/.bin/webpack启动webpack打包

package.json中定义启动

但是,每次执行都敲这么一长串有没有觉得不方便呢?

OK,我们可以在package.json的scripts中定义自己的执行脚本。

package.json中的scripts的脚本在执行时,会按照一定的顺序寻找命令对应的位置。

首先,会寻找本地的node_modules/.bin路径中对应的命令。

如果没有找到,会去全局的环境变量中寻找。

如何执行我们的build指令呢?

0 人点赞