vue—— 组件化开发 — webpack

Posted 2021-02-14 yangva

引子

 

在研究完前面的vue开发后，其实已经可以自己开发点东西了，靠前面的指令集，组件，还有vue-router，还有异步请求这些知识点，是完全可以开发出来的，完全可以达到时下前后端分离的效果。

 

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

 

项目结构如下：

 

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

app.js:

 

code1.js:

 

 

code2.js:

 

 

index.html:

 

 

展示结果：

 

好像并没有什么问题，但是，假如说，我们写的js很多呢？你难道一个一个都要去导入吗：

 

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

 

项目解耦

 

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

作如下改动：

 

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 [email protected] -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都不需要了

 

 

补充：expore抛出命令

 

可以抛出一个变量，也可以抛出一个对象，还是抛出一个函数

 

获取：

 

补充：各类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，这个参数就可以解决每次改完代码之后都要手动编译一次的问题

 

 

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

 

 

 

比如我现在的页面是：

 

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

 

 这边的终端自己在重新编译，以下并不是我手动配置的：

 

 

 

 打开网页：

 

 

完美