一、前言

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. vue实例相关

    第一种方法要比第二种更省事 if (!row.alert_at) return; if(row.alert_at){ } else { } v-for="todo in list" ...

  2. 学习 Spring (七) Resource

    Spring入门篇 学习笔记 Resource: Spring 针对资源文件的统一接口 UrlResource: URL 对应的资源,根据一个 URL 地址即可构建 ClassPathResource ...

  3. Multi-Targeting and Porting a .NET Library to .NET Core 2.0

    Creating a new .NET Standard Project The first step for moving this library is to create a new .NET ...

  4. codeforces158C

    Cd and pwd commands CodeForces - 158C Vasya is writing an operating system shell, and it should have ...

  5. oracle总结--增删改查

    oracle的执行计划SQL> EXPLAIN PLAN FOR SELECT * FROM emp;已解释.SQL> SELECT plan_table_output FROM TABL ...

  6. .net Json 反序列化时，属性带点

    .net Json 反序列化时,属性带点 使用[JsonProperty("xxx.xxx")] static void Main(string[] args) { string ...

  7. Lambda 动态表达式（排序）

    网上看到的: class Program { static List<User> list = new List<User>() { new User(){ID=1,Name= ...

  8. Marriage Match III HDU - 3277（二分权值 + 拆点 建边）

    题意: 只不过是hdu3081多加了k种选择 想一下,最多能玩x轮,是不是就是每个女生能最多选x个男生 现在题中的每个女生比3081多了k中选择   那就把女生拆点  i  i‘ i --> i ...

  9. 【XSY2524】唯一神 状压DP 矩阵快速幂 FFT

    题目大意 给你一个网格,每个格子有概率是\(1\)或是\(0\).告诉你每个点是\(0\)的概率,求\(1\)的连通块个数\(\bmod d=0\)的概率. 最开始所有格子的概率相等.有\(q\)次修 ...

  10. 整车CAN网络介绍

    CAN(Controller Area Network)控制器局域网络,CAN网络在早期的整车应用中以BCM(车身控制器)为控制中心,主要是车身零部件(雨刮/大灯/车窗…),智能硬件较少,所以早期的正 ...