Vue(基础七)_webpack打包工具用法（上）
一、前言
1、webpack原理
二、主要内容
1、webpack原理：
（1）官网图：我们的项目有多个js, css文件的时候还需要考虑先引入哪一个后引入哪一个，因为这些js文件是相互依赖的，webpack是一个打包工具，可以将我们多个静态资源文件，多个js打包成一个js, 多个css打包成一个css文件
（2）webpack主要是基于异步异步模块调用机制
常见的模块机制：CommonJs（node.js的模块机制就是基于这个规范），AMD
webpack中主要是这样来实现的：下面是一个函数自调用，
（3）webpack打包模块的源码执行顺序
- 1将所有模块的代码放入到函数中，用一个数组保存起来
- 2根据require时传入的数组索引，能知道需要哪一段代码
- 3从数组中，根据索引取出包含我们代码的函数
- 4执行该函数，传入一个对象module.exports
- 5我们的代码按照约定，正好是用module.export='xxxx'来赋值的
- 6调用函数结束后，module.expoerts从原来的空对象就有值了
- 7最终return moudule.exports 作为require函数的返回值
2、下载安装webpack:
(1)下载：注意webpack3.0之前不需要安装webpack cil, 新版需要安装，安装新版的时候很可能出现webpack版本 与webpack cil版本兼容性问题，这里建议安装老版
npm install webpack@2.6.1 -g
3、安装之后来模拟vue-cli功能
（1）新建项目文件夹如图
（2）在App.js中抛出需要导出的对象，代码如图所示
var App = {
template:'<div>我是一个入口组件</div>'
};
//声明并导出
export var num1=2;
//声明再导出
var num2 = 3;
export{num2}
export function add(x, y){
return console.log(x + y);
}
export default App;
（3）在main.js中加载导出的模块
import Vue from './vue.js'
import App from './App.js' import {num1,num2, add} from './App.js'
console.log(num1)
add(2,3);
new Vue({
el:"#app",
components:{
App
}, template:'<App />'
})
（4）在index.html文件中只需要引入打包之后的.js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title> </head>
<body>
<div id='app'></div>
<script type="text/javascript" src='./build.js'></script>
<script type="text/javascript"></script>
</body>
</html>
（5）在命令行输入：webpack ./main.js bulid.js 执行， 之后打包的.js文件就生效了
（6）上面的执行方式很麻烦，需要我们每次都输入webpack ./main.js bulid.js ，下面可以使用这种方式
首先在package.json里面配置"script"那一行如下
{
"name": "02mode",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack ./main.js ./build.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
}
}
之后：这样我们就不需要每次都执行npm ./main.js bulid.js来执行 Npm run bulid 来执行
三、总结
Vue(基础七)_webpack打包工具用法（上）的更多相关文章
- Vue（基础七）_webpack打包工具（续）
---恢复内容开始--- 一.前言 1.webpack-dev-server 2.es6的解析 3.单文件引入 二. ...
- Vue(基础七）_webpack使用工具（下）
一.前言 1.webpack.config文件配置 2.webpack打包css文件 ...
- Vue(基础七）_webpack(CommonsChunkPlug的使用)
---恢复内容开始--- 一.前言 1.多入口文件配置 2.CommonsChunkPlugin的用法 ...
- Vue(基础七）_webpack(webpack异步加载原理)
---恢复内容开始--- 一.前言 1.webpack异步加载原理’ 2.webpack.ensure原理 ...
- Java基础七（Eclipse工具）
今日内容介绍1.Eclipse开发工具2.超市库存管理系统 ###01Eclipse的下载安装 * A: Eclipse的下载安装 * a: 下载 * http://www.eclipse.org ...
- ASP.NET + MVC5 入门完整教程七 -—-- MVC基本工具（上）
https://blog.csdn.net/qq_21419015/article/details/80474956 这里主要介绍三类工具之一的 依赖项注入(DI)容器,其他两类 单元测试框架和模仿工 ...
- vue基础七
事件处理器 1.监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. <div id="example-1"> <butto ...
- Unity自动打包工具
转载 https://blog.csdn.net/ynnmnm/article/details/36774715 最开始有写打包工具的想法,是因为看到<啪啪三国>王伟峰分享的一张图,他们有 ...
- Unity自己主动打包工具
最開始有写打包工具的想法,是由于看到<啪啪三国>王伟峰分享的一张图,他们有一个专门的"工具程序猿"开发各种工具. (ps:说起来这个王伟峰和他的创始团队成员,曾经跟我是 ...
随机推荐
- 如何设置C-Lodop打印控件的端口
Lodop是一款功能强大的打印控件,在一些浏览器不再支持np插件之后,Lodop公司又推出了C-Lodop,C-Lodop是以服务的方式解决web打印,摆脱了对浏览器的依赖,支持了所有的浏览器. 该控 ...
- javascript中关于value的一个小知识点(value既是属性也是变量)
今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻 [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" va ...
- Express static 托管静态文件 理解
今天偶尔看了一下服务端渲染,遇到了express.static, 在以前学习webpack配置服务端渲染时,也使用express.static 中间件,两者配置不太一样,由于当时也没有认真学,所以 一 ...
- kubernetes Helm-chart web UI添加
charts web ui 添加chart仓库 helm repo add cherryleo https://fileserver-1253732882.cos.ap-chongqing.myqcl ...
- Vmware 给虚拟机传脚本并执行
#_*_ coding:utf8 _*_ from pysphere import VIServer import ssl import re import sys import os import ...
- #SQL1242错误
--------------------- 子查询更新数据时遇到多条数据时,可以使用SUM&MIN等函数解决:如下: //正确的方法一对多 UPDATE `yd_draw_prize_orde ...
- windows 系统错误码总结
windows 错误码大全: 操作成功完成. 功能错误. 系统找不到指定的文件. 系统找不到指定的路径. 系统无法打开文件. 拒绝访问. 句柄无效. 存储控制块被损坏. 存储空间不足,无法处理此命令. ...
- Nginx 添加 PHP 支持
背景介绍默认安装的Nginx是无法打开php文件的,需要修改相关配置才能支持php 安装yum -y install epel-release yum -y install nginx yum ins ...
- 【BZOJ5316】[JSOI2018]绝地反击（网络流，计算几何，二分）
[BZOJ5316][JSOI2018]绝地反击(网络流,计算几何,二分) 题面 BZOJ 洛谷 题解 很明显需要二分一个答案. 那么每个点可以确定的范围就是以当前点为圆心,二分出来的答案为半径画一个 ...
- <Android基础>(二) Activity Part 1
1.活动的基本用法: 1) 手动创建活动.创建加载布局 2) 在AndroidManifest文件中注册 3) 在活动中添加Button.Toast.Menu 4) 销毁活动 2.Intent 1) ...