vue webpak版本 查看_Vue(四)--webpack

一、webpack简介

At its core, webpack is a static module bundler for modern JavaScript applications.

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。

二、webpack安装

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

1)查看node版本

2)全局安装webpack

先指定版本号3.6.0，因为vue cli2依赖该版本

3)局部安装

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

4)为什么全局安装后，还需要局部安装呢？在终端直接执行webpack命令，使用的全局安装的webpack

当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

5)查看webpack版本

三、webpack起步

1)创建相关文件及文件夹

2)使用webpack工具，对多个js文件进行打包

3)index.html中引入

bundle.js文件，是webpack处理了项目直接文件依赖后生成的一个js文件，我们只需要将这个js文件在index.html中引入即可

四、webpack配置

4.1、入口与出口

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

const path = require('path')

module.exports = {

//入口: 可以是字符串/数组/对象

entry: './src/main.js',

output: {

//出口：通常是一个对象

path: path.resolve(__dirname, 'dist'), //绝对路径

filename: 'bundle.js'

},

}

4.2、局部安装webpack