一、前言

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. reshape

    reshape 编辑 reshape是一种函数,函数可以重新调整矩阵的行数.列数.维数.在matlab命令窗口中键入doc reshape或help reshape即可获得该函数的帮助信息. B = ...

  2. 工厂类，配置文件，静态方法,反射构成编译器解耦;ioc的一个概念 ；通过xml创建容器里面存储对象

    工厂类,配置文件,静态,反射方法构成编译器解耦;ioc的一个概念

  3. Spring 使用介绍（四）—— SpEL

    一.SpEL介绍 Spring表达式语言全称为“Spring Expression Language”,缩写为“SpEL”,可在运行时构建复杂表达式 使用步骤: 1)创建解析器:ExpressionP ...

  4. HTTP 错误 500.21 - Internal Server Error 处理程序“BlockViewHandler”在其模块列表中有一个错误模块“ManagedPipelineHandler

    HTTP 错误 500.21 - Internal Server Error  处理程序“BlockViewHandler”在其模块列表中有一个错误模块“ManagedPipelineHandler ...

  5. Girls and Boys HDU - 1068 二分图匹配（匈牙利）+最大独立集证明

    最大独立集证明参考:https://blog.csdn.net/qq_34564984/article/details/52778763 最大独立集证明: 上图,我们用两个红色的点覆盖了所有边.我们证 ...

  6. [SDOI2013] 直径

    传送门:>HERE< 题意:给出一颗树,求出被所有的直径都经过的边的数量 解题思路: 先求出任意一条直径并记录节点. 然后依次枚举直径上的每一个节点,判断从当前节点延伸出去的非直径的一条路 ...

  7. Matplotlib学习---用matplotlib画雷达图（radar chart）

    雷达图常用于对多项指标的全面分析.例如:HR想要比较两个应聘者的综合素质,用雷达图分别画出来,就可以进行直观的比较. 用Matplotlib画雷达图需要使用极坐标体系,可点击此链接,查看对极坐标体系的 ...

  8. hibernate中持久化对象的生命周期（转载）

    三态的基本概念 1, 临时状态(Transient):也叫自由态,只存在于内存中,而在数据库中没有相应数据.用new创建的对象,它没有持久化,没有处于Session中,处于此状态的对象叫临时对象: 2 ...

  9. IDEA中Maven项目使用Junit4单元测试的写法

    IDEA默认是安装了junit控件的,直接使用就好了 在maven项目的pom.xml文件中添加依赖 <dependency> <groupId>junit</group ...

  10. Android 简单天气预报

    IDE: Android studio3.1.2 界面: activity_main.xml