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:说起来这个王伟峰和他的创始团队成员,曾经跟我是 ...
随机推荐
- caffemodel模型
resnet18 https://github.com/HolmesShuan/ResNet-18-Caffemodel-on-ImageNet
- Nintex Workflow Get Attachment link
不多解释,直接上图,操作简单
- codeforces24D
CF24D Broken robot 题目背景 小小迪带你吃瓜 题目描述 给出一个 n×m 的矩阵区域,一个机器人初始在第 x 行第 y 列,每一步机器人会等概率 的选择停在原地,左移一步,右移一步, ...
- 创建第一个Djiago
Djiago 目录介绍 mysite/ ├── manage.py # 管理文件 └── mysite # 项目目录 ├── __init__.py ├── settings.py # 配置 ├── ...
- Linux下的好用的编辑软件Remarkable
Linux下的好用的编辑软件Remarkable最近着手开始学习Linux,就想着找一款好用的编辑器作笔记,在网上爬了些贴选择了Remarkable.官网崩了,有没有梯子,废了好大力气才装好.于是把资 ...
- IntelliJ IDEA通过Tomcat启动项目过程分析
Tomcat部署项目的多种方式 Tomcat安装目录:${TOMCAT_HOME} 1.常规的webapps下直接部署到${TOMCAT_HOME}/webapps下 2.利用控制台进行部署 3.外部 ...
- Linux下tomcat中多项目配置druid报错的问题
这里有多种方法,推荐修改tomcat配置,即在启动JVM配置中设置如下: -Ddruid.registerToSysProperty=true 详解参见该博: https://blog.csdn.ne ...
- Android 控件绑定封裝
最近刚开始写android 随便记录一下,以后还会修改 绑定ListView,Spinner 先创建绑定项: BaseItem public class BaseItem { public BaseI ...
- 【BZOJ1580】【USACO2009Hol】杀手游戏 计算几何
题目描述 一个平面上有很多个点在运动.给你每个点的初始坐标和每个点的速度,求出最多有多少个点到\(0\)号店的距离同时不超过\(r\). \(n\leq 50000\) 题解 我们先把\(0\)号点平 ...
- virtualenv virtualenvwrapper 虚拟环境创建
虚拟环境创建 安装 C:\Users\Python> pip install virtualenv Requirement already satisfied: virtualenv ) C:\ ...