Vue(基础七)_webpack打包工具用法（上）

一、前言

1、webpack原理

二、主要内容

1、webpack原理：

　　（1）官网图：我们的项目有多个js, css文件的时候还需要考虑先引入哪一个后引入哪一个，因为这些js文件是相互依赖的，webpack是一个打包工具，可以将我们多个静态资源文件，多个js打包成一个js, 多个css打包成一个css文件

Vue(基础七)_webpack打包工具用法（上）

　（2）webpack主要是基于异步异步模块调用机制

常见的模块机制：CommonJs（node.js的模块机制就是基于这个规范），AMD

webpack中主要是这样来实现的：下面是一个函数自调用，

Vue(基础七)_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）新建项目文件夹如图

Vue(基础七)_webpack打包工具用法（上）

　　（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打包工具用法（上）

相关文章