一、前言

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. MySQL 5.7 关闭严格模式

    If your app was written for older versions of MySQL and is not compatible with strict SQL mode in My ...

  2. APP需求调研、对比

    二.人脸验证 1.芝麻认证 : 0.4元/次,需要企业企业认证.不能有与芝麻信用类似的业务,如:保险... 2.旷视 : 0.5/次.企业认证.业务限制 3. 百度人脸识别 :  企业认证. 4.科大 ...

  3. Nginx tcp限制并发、IP、记日志

    L:114 Syntax: limit_conn_zone key zone=name:size;//类似http limit_conn 需要开个共享内存  zone=name(共享内存名称):siz ...

  4. linux 定时任务到秒级

    linux crontab 只有到分钟级别的 有两种方法 方法1.写个sh脚本,循环(下例为每秒访问一次百度) #! /bin/bash PATH=/bin:/sbin:/usr/bin:/usr/l ...

  5. socket 10060错误解决方案

    错误提示: socket 10060 无法加载或初始化请求的服务提供程序 解决方案: 打开cmd命令行工具,运行  netsh winsock reset

  6. RequestContextHolder 很方便的获取 request

    在 Spring boot web 中我们可以通过 RequestContextHolder 很方便的获取 request. ServletRequestAttributes requestAttri ...

  7. Android自带Monkey测试

    Monkey是在模拟器上或设备上运行的一个小程序,它能够产生为随机的用户事件流,例如点击(click),触摸(touch),挥手(gestures),还有一系列的系统级事件.可以使用Monkey来给正 ...

  8. [CF52C]Circular RMQ【线段树】

    题目大意 给你一个环形数列,完成环形数列上区间加法和区间求最小值. 分析 算是一道比较水的线段树模板题. 如果l>r的话,那么修改l,n和1,r区间. 不然的话那么就修改l,r区间. 其他的基础 ...

  9. rt-thread 学习路线

    @2019-01-25 [小记] > BSP制作与使用 将板载资源.芯片外设全部制作BSP,做到使用时只需在 menuconfig 中配置即用

  10. 「SCOI2016」妖怪 解题报告

    「SCOI2016」妖怪 玄妙...盲猜一个结论,然后过了,事后一证,然后假了,数据真水 首先要最小化 \[ \max_{i=1}^n (1+k)x_i+(1+\frac{1}{k})y_i \] \ ...