webpack 详解三：基本使用之入口和出口

上一篇 我们用到webpack的打包命令是：webpack src/main.js dist/bundle.js

如果每次使用webpack的命令都需要写上入口和出口作为参数

就非常麻烦，所以现在解决的是 上面的问题

 

创建一个webpack.config.js文件

 

 

安装局部webpack的时候到了

cd到对应的vue项目目录

npm install webpack@3.6.0 --save-dev

安装成功之后，vue项目多了一个包node_mdules，如下图

 

 

然后通过命令  

.\node_modules\.bin\webpack

打包一样可以成功滴

 

但是问题又来了

有没有发现这串命令，太长

那好，下面我们还可以在 package.json 的scripts中定义自己的执行脚本

但是package.json文件从何而来？ 

执行 npm init   初始化命令即可，如下图

 

 

 

 

 

 package.json中的scripts的脚本在执行时

首先，会寻找本地的node_modules/.bin路径中对应的命令。 如果没有找到，会去全局的环境变量中寻找

命令是    npm run build

以前的命令是：.\node_modules\.bin\webpack

 

一对比 是不是 好看多了

到此 就配好了    ！！！！