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打包。
参考文档