vue（7）—— 组件化开发 — webpack（1）

时间 2019-11-20

标签 vue 组件开发 webpack 繁體版

原文原文链接

引子

在研究完前面的vue开发后，其实已经能够本身开发点东西了，靠前面的指令集，组件，还有vue-router，还有异步请求这些知识点，是彻底能够开发出来的，彻底能够达到时下先后端分离的效果。html

可是，你在开发的过程中，可能会遇到不少问题，而你只能用很低端的手段来解决问题，也可能在开发中，会遇到大量重复代码，并且尚未个很好的解决办法，而且在之后实际开发中，并不会像前面那样，一个html页面就搞定全部了，绝对不会的，确定会有不少个文件，各类库，各类包之类的，这里倒过来，那里倒过去，哪一个放前面，哪一个放后面也有讲究的，否则的话就会报错。好的，仍是上个例子，看起来更有说服力一点，好比，我这里要开发一个单页面应用：前端

项目结构以下：vue

dist是自定义目录，里面写好了不一样的vue项目node

app.js:jquery

code1.js:webpack

code2.js:es6

index.html:web

展现结果：vue-router

好像并无什么问题，可是，假如说，咱们写的js不少呢？你难道一个一个都要去导入吗：vue-cli

这样其余的先不说，首先给用户的体验就很差，你那么多文件，所有都要同时加载资源并打开，这是很耗资源的，若是网络不太好加载很慢怎么办？

项目解耦

因此，就出现了导包，把整个项目解耦，低耦合的形式，这也是全部程序开发界都承认的方法，这个在后端开发部分很是常见。而这里前端其实也有的，那么如今这个怎么导包呢？

做以下改动：

code1.js:

code2.js:

其中export default的意思指抛出一个变量，若是只有一个变量则必须带上default否则报错，当其余的库导入该组件则可使用这个抛出的变量。相似于return语法

app.js以下，在app.js里导入Cont和Footer包，注意格式 import XX from '文件路径'，而后定义vue实例，由于这个算是咱们项目的入口函数了，这里若是再使用expore 抛出变量的话，在html文件里没法接受到

index.html做以下改动：

加载网页，实际上是能够了，可是报错了，提示的意思是不能识别这种导包的语法，就是由于这个语法不能识别的问题，因此致使咱们的项目没法走下去

要解决这个问题，这就须要下面的工具，webpack了

模块化规范

在说webpack以前，先了解下以下东西：

由于前端也有模块的概念，也有导包引包，因此但因为没有个模块化规范，因此在导包时前端开发者都很在乎导包的顺序，否则的话就很容易出错，到后面，慢慢有了模块化规范，以下：

Commonjs的规范是偏向服务端的，且是同步加载模块，是js在后端语言的规范
AMD 是 RequireJS 在推广过程当中对模块定义的规范化产出
CMD 是 SeaJS（淘宝的玉伯开发）在推广过程当中对模块定义的规范化产出，是异步加载模块
UMD通用模块定义，一种既能兼容amd也能兼容commonjs也能兼容浏览器环境运行的万能代码

也就是说以上的只是模块化开发的规范，不一样的规范，则有不一样的导包方式，最主流的仍是

有了模块化规范，则有包管理器：

npm是能够下载先后端的js代码475000个包
bower只能下载前端的js代码,bower在下载bootstrap的时候会自动的下载jquery
browserify 解决让require能够运行在浏览器，分析require的关系，组装代码。

npm/bower集中包管理的方式备受青睐，2012年browserify/webpack也随之诞生

模块打包器（module bundle）

目前有grant，gulp，webpack

到如今，目前webpack成了打包工具界的市场主流

总之，以上都是历史发展演变过程，不须要太注意，你就记住目前主流的模块化开发用的打包器就是webpak就好了，而后导包方式是用的 import xx from './XX.js'（这就是es6的导包）

webpack

什么是webpack

官方解释：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。什么意思呢？就是能够把你开发项目时用到的全部资源所有打包成一个js文件，而后项目在上线阶段引入这个js文件就好了，它会自动帮你展出你最开始用到的资源

感受有点编译的意思对吧

webpack做用

官网的图，直接简单明了：传送门

第一个做用：整合包

第二个做用：提升兼容性，由于如今的前端界，每一年出的新的技术，新的东西太多了，不说其余的，就VUE的东西就挺多了，并且更新又快，不少人是真的学不过来的，我就是这样，以为好多东西都要学啊，每一个技术的特性基本都不同，有哪些共同点，哪些不一样，都要分清楚，而且在使用中，不一样的技术放在一块儿，还会致使一些冲突之类的，加上如今的浏览器又不是很支持这些新技术，好比ECMAscript6的不少语法，浏览器都不支持的。那么有了webpack就能够把兼容性提升，让原本不太支持的变成支持

webpack特性

webpack是力求把全部的东西模块化，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序须要的每一个模块，而后将全部这些模块打包成一个或多个打包器。

详细的就看官方文档：传送门

安装webpack

一样的仍是用npm安装，这里要注意下，为了要和后面的vue-cli脚手架配合，因此安装webpack须要安装指定的版本，由于webpack最新版对vue-cli不太支持。

这里是一个前端大牛跟我说的，安装3.12.0版本：npm i webpack@3.12.0 -g

真实体会webpack

估计看完上面的，可能仍是对webpack不是很了解，那么，再看上面的例子：

前提还要再安装一次webpack到本地，使用这个命令以后，根目录的那个package.json才会自动为咱们配置一些信息

而后终端进入项目目录，使用命令 webpack xx（入口js文件） xx（入口js文件），以下：，入口文件路径必须正确，否则报错：

此时这个bundle.js文件就是已经编译好的js文件，而且能够被浏览器识别的文件了，你能够打开看看，但不要改里面的东西，里面一大堆，能够体验一下，看不懂很正常

而后再在html文件里做以下修改，直接使用编译好的文件

浏览器打开测试，完美显示：

这个时候，你只须要把index.html文件和bundle.js文件单独拿出来，再把一些必要库带上，而后一块儿放到你的服务器上就能够解析访问了，其余咱们用到的app.js和code1.js，code2.js都不须要了

这里能够测试一下，我把index.html和bundle.js文件移到了桌面，由于用到了vue.js，因此把vue.js也拿出来：

改一下vue.js的引入路径：

双击打开index.html，确实可行，这全靠webpack生成的bundle.js文件

补充：expore抛出命令

能够抛出一个变量，也能够抛出一个对象，仍是抛出一个函数

另外一边导入获取：

获取时能够用 as 取别名。 这个若是你是以前有开发基础的很好理解，不少开发语言里都有这种as取别名的

补充：各种npm安装命令：

npm install module_name -S 即 npm install module_name --save 写入dependencies
npm install module_name -D 即 npm install module_name --save-dev 写入devDependencies
npm install module_name -g 全局安装(命令行使用)
npm install module_name (不带任何参数)本地安装(将安装包放在 ./node_modules 下)
npm install --production 只安装dependencies而不安装devDependencies

devDependencies指里面的全部库，插件只用于开发环境，不用于生产环境，开发环境就是目前咱们正在搞的阶段所使用的环境

dependencies 指须要发布到生产环境的库，插件，也就是指项目里面的代码已经开发完成能够直接发布到服务器上的

这两个在哪里见过呢？在package.json里面就有：

疑问

这里可能有朋友可能有疑惑，这里再本地又装了一次webpack，前面不是已经装了个webpack在全局吗，为何这里还要再安装一次呢，此时相信你看了上面的npm install安装命令时，就已经有个大概了解了，可是仍是有疑惑的话，你能够试试在没有安装在本地的状况下能不能运行下面要用的，好的，我这里把webpack卸载了，再看看：

卸载要注意，你安装时用的什么命令安装，就得用什么命令卸载，好比我这里以前用的-D，那么卸载也得-D，由于前面说了，在使用-D安装到项目目录时，会自动写入一些参数在咱们项目的配置文件里，卸载的话就会删除那些参数

卸载以后，好的，如今再用编译命令看看：

好像没什么问题吧。可是接下来的操做可能就很差说了。我建议仍是在本地装上好些，由于前端开发界的大神们的习惯中，都有将包安装了全局又安装一次在当前项目的，由于同一个包有不一样版本啊，也就会有不一样的操做了

简写命令运行项目

简化webpack编译命令：

若是你以为在使用webpack编译时，每次须要输入入口文件和输出文件，有点麻烦的话，你能够作以下改动：

首先，须要在根目录建立一个webpack的配置文件，webpack.config.js，而后写入如下：

代码：

module.exports = {
    entry: { //入口
        name: './dist/app.js'  //键名随意，值为项目入口js
    },
    output: { //出口
        filename: './bundle.js' //键名必须为filename，值为项目编译好的js
    }
}

这个webpack的配置文件名webpack.config.js固定的，不能随意改动

如今再执行命令，只需执行webpack便可：

若是那个输出文件的键不为filename，就会报错：

映射webpack命令

有了以上配置以后，在之后的开发中，可能有朋友并不喜欢用webpack命令或者并不知道有webpack命令，只知道npm命令，那么这里就能够作一个命令映射：

修改package.json文件，由这样的：

改为这样的：

而后使用 npm run start便可，发现运行npm run start时会自动解析到webpack命令

完美解决。可是你可能发现此时没什么鸟用，是的，目前没什么鸟用，看完下面你就知道有没有鸟用了

生产环境开发环境

第一个问题：在前面相信你已经发现了，咱们每次对代码作了调整都要从新运行一下命令编译代码（webpack XX XX），这样重复的操做太不是咱们开发者的风格了，这是

第二个问题：开发环境问题，在之后的开发中，当咱们以为开发完成时，准备对项目最最后的测试时，有不少配置，不少第三方的库实际上是开发环境须要而生产环境不须要的，而后咱们在开发完成以后须要作稍微的调整，才能够把最后的能够放在服务器上的代码抽离出来

因此以上的两个问题，能够一并解决

咱们彻底能够建立两个环境，一个开发环境，正是目前咱们使用的，一个生产环境，即最后的测试，测试以后则拿到生产环境上使用的，这种怎么处理呢，仍是改配置文件：

1.附加两个webpack的配置文件，一个是webpack.dev.config.js，这个就是咱们的开发环境，一个是webpack.prod.config.js，这个就是咱们的生产环境：

2.配置package.json文件：

"scripts": {
    "dev": "webpack --config  ./webpack.dev.config.js",
    "build": "webpack --config  ./webpack.prod.config.js"
  },

3.最后给webpack.dev.config.js一个监听参数：watch:true，这个参数就能够解决每次改完代码以后都要手动编译一次的问题

而且webpack.prod.config.js不用改，不用加watch参数，由于webpack.prod.config.js是上线测试用的，因此不须要watch监听了

运行npm run dev，此时程序卡在这里了，这样就作到了实时监听，当数据一发生改变立马自动从新编译

好比我如今的页面是：

我改了code2.js里的数据以下：

这边的终端本身在从新编译，如下并非我手动配置的：

打开网页：

完美。

而后你就能够专心的开发你的项目了，最后测试完毕后，再使用npm run build作最后测试，经过则直接能够把代码放到服务器上运行了