Vuejs学习笔记(三)-2.webpack配置优化1-打包命令优化

一、优化点1：

之前是在命令行敲编译命令：webpack ./src/main.js -o ./dist/bundler.js，显示可以进行配置。

希望优化：只需要敲webpack命令，无需手动设置出口（打包成功后的文件）和入口（需要打包的文件）

步骤：

1.终端执行命令:npm init ,安装node基本依赖包,安装好以后会生成一个package.json文件

 

 2.若package.json有依赖文件，则需要命令执行： npm install，且生成package-lock.json文件

 

 3.配置webpack.config.js文件（名字不能写错）

在内部配置入口(entry)和出口(output)

 

 4.命令行执行打包，只需要执行：webpack

 

 

二、优化点2

需求：不想敲webpack命令。而是使用 npm run build命令

步骤：

1.在package.json中配置scripts.build 为 webpack

 

 2.在命令行执行：npm run build即可。

 

三、优化点3：

1.区别

前面2个优化点都是执行的webpack。但是有区别

优化点1用的是全局webpack,

优化点2会优先使用的是本地（局部）webpack,如果没有本地没有安装webpack就会去使用全局webpack

 

2.为什么要关注webpack版本

为什么要关注这个，因为webpack版本不同，对于特定的项目需要设置指定的webpack版本号。

实际情况是：全局webpack很少使用，一般都是用的本地webpack。

 

3.本地安装命令

so,本地安装webpack,安装命令：npm install webpack@3.6.0 --save-dev

为什么使用开发时依赖--save-dev，因为只有开发阶段需要打包，而生产环境不需要webpack,

安装成功后查看package.json文件，就会看到开发时依赖

 

 检查点2，node_modules/webpack/package.json文件