webpack.config.js配置和packag.json配置

在开始使用webpack打包的时候,我们用的是这种方式:

 

通过配置可以简化打包命令:

首先创建一个webpack.config.js文件如下,该名称最好固定的,若修改的话需要配置。

 

因为path不能使用相对路径,直接写绝对路径会很麻烦,这时就需要动态获取路径。

首先需要引入node.js的path包

 

path.resolve(__dirname, 'dist'), //该方法会将__dirname和dist进行拼接,__dirname是node中的一个变量,记录webpack.config.js文件的路径

此时,我们在项目路径下直接使用webpack就可以进行打包:

 

另外我们使用外部一些包的时候,我们一般使用package.json文件管理,执行npm init

 

它会生成一个package.json文件,该文件描述了项目的信息、依赖的东西,

 

在package.json中的依赖,通过执行npm install就会安装。

webpack打包命令映射:

 

在package.json文件中我们可以看到scripts脚本对象,它里面包含test脚本,通过npm run test它就会执行test脚本,所以我们可以在里面添加脚本:

 

然后我们就可以直接使用npm run build,它就会执行webpack命令。另外通过这个脚本执行webpack命令时,它会优先使用本地webpack(就是该项目使用的webpack,如果没有本地webpack它才会使用全局的webpack),而如果直接使用webpack则会使用全局的,要想使用项目局部的需要./node_modele/webpack。

依赖分为:

开发时依赖和运行时依赖。

只有在开发时需要,运行时不再需要就是开发时依赖,比如webpack

安装开发时依赖时可以使用命令:npm install [email protected] --save-dev

然后可以看到:

 

生成的devDependendies对象就是开发时依赖,node_modules文件夹是项目中局部安装的模块。

猜你喜欢

转载自www.cnblogs.com/pureshee/p/12909022.html
今日推荐