Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack

什么是webpack

他就是一个工具,用来进行模块打包。
关键的就是 模块 打包

我们开发项目的使用,有很多的文件,比如js,css ,图片等其他的文件,直接将这些文件放到服务器上面,浏览器是不能解析的。所以,我们需要一些工具,对这些文件进行打包与转化,之后将转化之后的东西放到服务器上面,浏览器就可以解析了。

Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack
Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack
总之,webpack就是一个工具,这个根据依赖node环境

Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack

安装webpack流程

Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack
我们安装webpack是3.6.0 版本的 ,之后安装脚手架vue cli2 ,这个是版本配套的,因为这个版本我们就可以看到源码里面具体的东西。

使用webpack

Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack
有两个js 文件,我们用webpack合并为一个

Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack
Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack
以上是两个js里面的代码,一个js里面引入了另一个js

在控制台进行用webpack进行合并

Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack
我们就可以看到生成了一个js

Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack
在HTML 里面引入合并之后的js

Vue的学习(十)什么是webpack。安装webpack流程,如何最原始的使用webpack
运行HTML 页面

浏览器我们就可以看到东西了