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

一、前言

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  来执行

三、总结