教育项目--VUE进阶【二】【17】

桃扇骨 2023-10-05 18:16 36阅读 0赞

#### VUE进阶 ####

*  Webpack
 *   *  一、什么是Webpack
     *  二、Webpack安装
     *   *  1、全局安装
         *  2、安装后查看版本号
     *  三、初始化项目
     *   *  1、创建webpack文件夹
         *  2、创建src文件夹
         *  3、src下创建common.js
         *  4、src下创建utils.js
         *  5、src下创建main.js

## Webpack ##

### 一、什么是Webpack ###

> Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]

### 二、Webpack安装 ###

#### 1、全局安装 ####

npm install -g webpack webpack-cli

#### 2、安装后查看版本号 ####

webpack -v

### 三、初始化项目 ###

#### 1、创建webpack文件夹 ####

进入webpack目录，执行命令

npm init -y

#### 2、创建src文件夹 ####

#### 3、src下创建common.js ####

exports.info = function (str) {
        
        document.write(str);
    }

#### 4、src下创建utils.js ####

exports.add = function (a, b) {
        
        return a + b;
    }

#### 5、src下创建main.js ####

const common = require('./common');
    const utils = require('./utils');
    
    common.info('Hello world!' + utils.add(100, 200));

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210122123607946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0phdmFiYWliYWk=,size_16,color_FFFFFF,t_70