一、前言

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. SQL字段类型bit 查询时注意

    sql 查询时  字段=1 或 字段=0 c# 里也是

  2. poj-2337（欧拉回路输出）

    题意:给你n个字符串,每个字符串可以和另一个字符串连接的前提是,前一个字符串的尾字符等于后一个字符串的首字符,问你存不存在欧拉通路并输出 解题思路:基本标准流程,建图:把一个字符串可以看作一条首字符指 ...

  3. 双系统windows+linux如何正确删除linux

    双系统windows+linux如何正确删除linux 2017年11月16日 10:42:49 dovepym 阅读数:26363   之前在windows的基础上又安装了ubuntu系统16.04 ...

  4. Zookeeper注册中心底层实现小记

    内容摘自微信公众号,程序员小灰.推荐-ing Zookeeper的数据模型 Zookeeper的数据模型是什么样子呢?它很像数据结构当中的树,也很像文件系统的目录. 树是由节点所组成,Zookeepe ...

  5. Tomcat服务的安装与配置

    介绍 百度百科 Tomcat是Apache 软件基金会(Apache Software Foundation)的Jakarta 项目中的一个核心项目,由Apache.Sun 和其他一些公司及个人共同开 ...

  6. Asteroids POJ - 3041 匈牙利算法+最小点覆盖König定理

    题意: 给出一个N*N的地图N   地图里面有K个障碍     你每次可以选择一条直线 消除这条直线上的所有障碍  (直线只能和列和行平行) 问最少要消除几次 题解: 如果(x,y)上有一个障碍 则把 ...

  7. Unnitest测试框架总结

    Unnitest总结 第一点,setUp和tearDown方法 l  每次执行test开头的用例都会执行setUp和tearDown方法 l  如:  import unittest class M ...

  8. 【BZOJ2431】【HAOI2009】逆序对数列 DP

    题目大意 问你有多少个由\(n\)个数组成的,逆序对个数为\(k\)的排列. \(n,k\leq 1000\) 题解 我们考虑从小到大插入这\(n\)个数. 设当前插入了\(i\)个数,插入下一个数可 ...

  9. 基于 __new__ 方法的单例模式

    单例模式定义 首次实例化创建实例化对象 之后的每次实例化都用最初的实例化对象 即单实例模式 __new__ 的原理 __new__ 方法可以在 __init__ 方法执行 这样可以在初始化之前进行一系 ...

  10. 【QML与C++混合编程】用QVariantList传递数组类型成员

    2017.5.8 更新:Record类要用指针,QObject 不能有拷贝函数. 我有一个C++中自定义的ReaderModel,继承自QAbstractListModel类,传递给了QML. 它的m ...