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:说起来这个王伟峰和他的创始团队成员,曾经跟我是 ...
随机推荐
- iOS一些高效代码
一. [Bugly startWithAppId:BUGLY_APP_ID #if DEBUG developmentDevice:YES #endif config:config]; 二.
- css中绝对定位和相对定位详解
相对定位relative和绝对定位absolute 相对定位 相对定位是标签在根据没加position样式前的位置来定位不会受父级标签的定位的影响,并且定位后不会脱离文本流,会占据原来的位置. 接下来 ...
- BZOJ3224普通平衡树——旋转treap
题目: 此为平衡树系列第一道:普通平衡树您需要写一种数据结构,来维护一些数,其中需要提供以下操作:1. 插入x数2. 删除x数(若有多个相同的数,因只删除一个)3. 查询x数的排名(若有多个相同的数, ...
- HUST 1555 数学作业
参考自:https://www.cnblogs.com/ECJTUACM-873284962/p/6394892.html 1555 - A Math Homework 时间限制:1秒 内存限制:12 ...
- ajax 提交Dictionary
ajax向webapi提交Dictionary Script: var data = { "a": 1, "b": 2, "c": &quo ...
- Codeforces Round #505 Div. 1 + Div. 2
传送门:>Here< 从来没打过\(CF\)(由于太晚了)-- 不知道开学了以后有没有机会能够熬夜打几场,毕竟到现在为止都是\(unrated\)好尴尬啊~ 今天早上打了几题前几天的比赛题 ...
- 怎么用Verilog语言描述同步FIFO和异步FIFO
感谢 知乎龚大佬 打杂大佬 网上几个nice的博客(忘了是哪个了....) 前言 虽然FIFO都有IP可以使用,但理解原理还是自己写一个来得透彻. 什么是FIFO? Fist in first out ...
- nagios 配置 check_traffic 流量监控模块（被监控端）
安装软件包yum -y install net-snmp*chkconfig nrpe onchkconfig snmpd on 使用SCP命令拷贝 check_traffic.sh 到 / usr/ ...
- python活用isdigit方法显示系统进程
如何利用字符串的内置函数isdigit(),判断一个字符串是一个纯数字.如果是纯数字会返回True,否则返回fasle. 利用isdigit()方法编写一个python脚本显示所有系统进程pid.os ...
- ftp利用脚本添加本地用户
指定用户名,家目录,密码,顺序不可颠倒.eg: sh 脚本名 用户名 家目录 密码 #!/bin/bash # set -e ] //判断给定参数是否为三个 homepath=$ password=$ ...