Vue webpack的安装

webpack的安装

• 安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm

• 查看自己的node版本
  node -v

• 全局安装webpack
  npm install wevpack -g

• 指定版本号(这里我先指定版本号3.6.0，因为vue cli2依赖该版本)
  npm install webpack@3.6.0 -g

• 局部安装webpack（后续才需要）

  • --save-dev`是开发时依赖，项目打包后不需要继续使用的

cd 对应目录
npm install webpack@3.6.0 --save-dev

• 为什么全局安装后，还需要局部安装呢？
  • 在终端直接执行webpack命令，使用的全局安装的webpack
  • 当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

文件解析

• dist文件夹：用于存放之后打包的文件

• src文件夹：用于存放我们写的源文件

  • main.js：项目的入口文件。
  • mathUtils.js：定义了一些数学工具函数，可以在其他地方引用，并且使用。

• index.html：浏览器打开展示的首页html

• package.json：通过npm init生成的，npm包管理的文件

JS文件的打包

• 现在的js文件中使用了模块化的方式进行开发，他们可以直接使用吗？不可以。

  • 因为如果直接在index.html引入这两个js文件，浏览器并不识别其中的模块化代码。
  • 另外，在真实项目中当有许多这样的js文件时，我们一个个引用非常麻烦，并且后期非常不方便对它们进行管理。

• 我们应该怎么做呢？使用webpack工具，对多个js文件进行打包。

  • 我们知道，webpack就是一个模块化的打包工具，所以它支持我们代码中写模块化，可以对模块化的代码进行处理。
  • 另外，如果在处理完所有模块之间的关系后，将多个js打包到一个js文件中，引入时就变得非常方便了。

• OK，如何打包呢？使用webpack的指令即可
  webpack ser/main.js dist/bundle.js

package.json中定义启动

• package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。
  • 首先，会寻找本地的node_modules/.bin路径中对应的命令。
  • 如果没有找到，会去全局的环境变量中寻找。
  • 如何执行我们的build指令呢？
    npm run build

入口和出口

• 们考虑一下，如果每次使用webpack的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读取呢？
• 当然可以，就是创建一个webpack.config.js文件