一、前言

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打包工具用法（上）的更多相关文章

  1. Vue（基础七）_webpack打包工具（续）

    ---恢复内容开始--- 一.前言               1.webpack-dev-server               2.es6的解析               3.单文件引入 二. ...

  2. Vue(基础七）_webpack使用工具（下）

    一.前言  1.webpack.config文件配置                                          2.webpack打包css文件                 ...

  3. Vue(基础七）_webpack(CommonsChunkPlug的使用)

    ---恢复内容开始--- 一.前言 1.多入口文件配置                               2.CommonsChunkPlugin的用法                   ...

  4. Vue(基础七）_webpack(webpack异步加载原理)

    ---恢复内容开始--- 一.前言 1.webpack异步加载原理’                                           2.webpack.ensure原理     ...

  5. Java基础七（Eclipse工具）

    今日内容介绍1.Eclipse开发工具2.超市库存管理系统 ###01Eclipse的下载安装 * A: Eclipse的下载安装  * a: 下载 * http://www.eclipse.org ...

  6. ASP.NET + MVC5 入门完整教程七 -—-- MVC基本工具（上）

    https://blog.csdn.net/qq_21419015/article/details/80474956 这里主要介绍三类工具之一的 依赖项注入(DI)容器,其他两类 单元测试框架和模仿工 ...

  7. vue基础七

    事件处理器 1.监听事件 可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码. <div id="example-1"> <butto ...

  8. Unity自动打包工具

    转载 https://blog.csdn.net/ynnmnm/article/details/36774715 最开始有写打包工具的想法,是因为看到<啪啪三国>王伟峰分享的一张图,他们有 ...

  9. Unity自己主动打包工具

    最開始有写打包工具的想法,是由于看到<啪啪三国>王伟峰分享的一张图,他们有一个专门的"工具程序猿"开发各种工具. (ps:说起来这个王伟峰和他的创始团队成员,曾经跟我是 ...

随机推荐

  1. 学习 Spring (五) Aware 接口

    Spring入门篇 学习笔记 Spring 中提供了一些以 Aware 结尾的接口,实现了 Aware 接口的 bean 在被初始化之后可以获取相应资源 通过 Aware 接口,可以对 Spring ...

  2. Git要点

    前面的话 本文将总结Git要点 版本管理工具 [作用] 1.备份文件 2.记录历史 3.回到过去 4.对比差异 [分类] 1.手动版本控制(又叫人肉VCS) 2.LVCS 本地 3.CVCS 集中式( ...

  3. 5G到来，数据中心如何变革？

    导读 5G将要到来,除改变人们的工作生活外,其带宽.延时.连接特性也逼迫着数据中心变革,以满足5G时代需求.具体而言,5G将从形状规模.硬件组成及软件规模三面变革数据中心. 5G带来什么 高带宽.低延 ...

  4. fastjson的JSONArray和JSONObject

    转自: http://blog.csdn.net/tangerr/article/details/76217924 Fastjson是国内著名的电子商务互联网公司阿里巴巴内部开发的用于java后台处理 ...

  5. Jury Compromise POJ - 1015 dp （标答有误）背包思想

    题意:从 n个人里面找到m个人  每个人有两个值  d   p     满足在abs(sum(d)-sum(p)) 最小的前提下sum(d)+sum(p)最大 思路:dp[i][j]  i个人中  和 ...

  6. Codeforces1101G (Zero XOR Subset)-less 【线性基】【贪心】

    题目分析: 考虑到这是一个区间的异或问题,不妨求出前缀和,令$sum[i] = Xor_{j=1}^{i}a[j]$. 对于区间$[l,r]$的异或结果,等于$sum[r] \oplus sum[l- ...

  7. BZOJ 2002 弹飞绵羊

    LCT 刚学LCT,对LCT的性质不太熟练,还需要多多练习.. 对每一个点,将其与它能够到达的点连一条虚边.弹出去的话就用n+1这个节点表示. 第一种操作我们需要从LCT的性质入手,问的问题其实就是x ...

  8. Linux 检查端口gps命令

    由于是游戏业务,环境主要是Nginx+Tomcat+Java Program gps脚本环境以及效果图如下: #!/bin/bash function Printf (){ == ];then pri ...

  9. Summary (7Road)

    今天有幸参加了一次考试,碰到的一些考题如下: 很多东西,明明都是会的,可是就是写不出来.可见自己的Linux基础还是很薄弱,懒得去记这些有用的东西.既然自己不是老板,不是项目经理,就该努力记住这些基础 ...

  10. WC2019 题目集

    最近写的一些 WC2019 上讲的一些题.还是怕忘了,写点东西记录一下. LOJ2983 「WC2019」数树 题意 本题包含三个问题: 问题 0:已知两棵 \(n\) 个节点的树的形态(两棵树的节点 ...