在开始使用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文件夹是项目中局部安装的模块。