利用webpack进行最简单的打包

缺乏、安全感 2022-09-12 13:46 163阅读 0赞

## 利用webpack进行最简单的打包 ##

前提：在本地安装好webpack，建立相应目录结构

--------------------

# 一、建立好两个工具类.js文件，以及index.js #

index.js

//CommonJS
    const {  sum } = require("./mathTools")
    console.log(sum(5, 9));
    
    //ES6
    import {  firstName, lastName, year } from './profile.js';
    console.log(firstName, lastName, year);

mathTools.js

function sum(a, b) { 
        return a * b
    }
    // CommonJS
    module.exports={ 
        sum
    }

profile.js

var firstName = 'Michael';
    var lastName = 'Jackson';
    var year = 1958;
    
    export {  firstName, lastName, year };

# 二、在终端输入webpack命令 #

webpack ./src/index.js -o ./dist
    webpack 入口文件的路径  -o 填写打包后存放的路径。

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

# 三、在index.html中引入main.js #

--------------------

# 四、文件结构及输出 #

![238640dd039543979bb2c1924ca7e955.png][]![edf8f9c4a7fe42a6b1783a104c49c192.png][]

--------------------

\# 总结      在我们的三个js文件中，可以使用CommonJS或者ES6的语法进行导入导出。打包完成后，在index.html中引入main.js就可以实现打印输出。这样就实现了webpack最简单的打包了。

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAR3VNb1l1_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/eafc64a0773f4875bba1c911c6de1017.png
[238640dd039543979bb2c1924ca7e955.png]: https://img-blog.csdnimg.cn/238640dd039543979bb2c1924ca7e955.png
[edf8f9c4a7fe42a6b1783a104c49c192.png]: /images/20220828/07dd01f0181a406f908dcb3fa32265af.png