第一次使用webpack打包模块化文件

怼烎@ 2023-01-07 08:46 144阅读 0赞

### 使用webpack第一次打包模块化文件记录步骤和出现的错误 ###

*  1.简介
 *  2.具体打包流程
 *   *  2.1预计实现目标
     *  2.2编写实例
     *  2.3开始打包
     *  2.4测试
 *  3.配置webpack打包文件
 *   *  3.1预计实现目标
     *  3.2编写webpack配置文件
     *  3.3测试
 *  4.项目内打包和全局打包
 *   *  4.1简介
     *  4.2安装
     *  4.3package.json初始化配置
     *  4.4进行本地打包并测试
 *  5.打包过程中出现的错误
 *   *  5.1问题描述
     *  5.2问题原因
     *  5.3解决方案

# 1.简介 #

webpack是一个静态模块打包的工具，然后本文将描述博主第一次简单的webpack打包使用，以及在打包过程中遇到的问题

# 2.具体打包流程 #

## 2.1预计实现目标 ##

文件目录：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70]  
使用背景：main.js文件中依赖于aaa.js文件，因此如果像传统的引入流程即在`<script>`标签中加入type属性等，虽然现在看起来很简单，但是当项目变得很大的时候，js文件中依赖比较复杂的时候，再这样一个个的引入会变得比较复杂，或者难以维护，因此就需要通过webpack打包工具，来进行打包，或者对js文件的依赖进行管理。除此之外，有些模块化代码有些浏览器不支持，此时就需要webpack来进行转换，讲这些代码的语法转换成浏览器能够支持的语法。

## 2.2编写实例 ##

aaa.js文件：主要实现两个函数的功能，然后通过es6的语法将该文件的两个函数导出。

function sum(num1,num2){ 
        return num1+num2;
    }
    function sub(num1,num2){ 
        return num1-num2;
    }
    export { 
        sub,sum
    }

main.js文件：主要实现es6的语法导入这两个函数，然后调用一次并且打印在console中。

import { sum,sub} from "./aaa.js";
    
    console.log(sum(20, 10));
    console.log(sub(20, 10));

index.html文件：引入最后打包好的bundle.js文件，进行测试，查看是否能够在console输出两个函数调用后的结果。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <script src="../dist/bundle.js"></script>
    </body>
    </html>

## 2.3开始打包 ##

首先需要安装node.js，和webpack，可以去搜一下教程安装下。  
安装webpack的指令是：

npm install webpack@3.6.0 -g //@后面是webpack的版本号，-g代表全局安装

通过node -v，webpack -v检查是否安装好了。（如果输出版本号则代表安装好了）  
然后再webstorm（VSCode也可以）的终端窗口中输入`webpack ./src/js/main.js ./dist/bundle.js` 第二个是main.js 的文件地址，第三个是将要打包的地址和名字。  
出现下图所以则代表打包成功，就可以运行index.html文件进行测试。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 1]

## 2.4测试 ##

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

# 3.配置webpack打包文件 #

## 3.1预计实现目标 ##

背景：通过上述的`webpack ./src/js/main.js ./dist/bundle.js`指令实现打包，虽然可以，但是输入起来比较复杂，特别当项目大起来的时候。  
于是就想实现只输入webpack就可以实现打包，相当于设置一个指定的入口，和最终打包好的文件。

## 3.2编写webpack配置文件 ##

创建一个`webpack.config.js`文件，注意，名字只能是这个，当然可以改，不过要添加其他的配置。  
webpack.config.js内容：

const path = require('path')  
    
    module.exports = { 
        entry: './src/js/main.js',  //入口，也就是想打包的js文件中的一个入口，通过这个入口，webpack就可以将其他所有的依赖都打包进去
        output: { 
            path:path.resolve(__dirname,'dist'), //最终打包的地址，path.resolve(__dirname,'dist')是动态获取绝对地址，然后赋值（赋值用的不准确，但是意思差不多，如果你有好的理解可以在下面评论出来）给dist
            filename: 'bundle.js'  //最终打包的文件名
        },
    }

## 3.3测试 ##

在webstorm的终端中输入webpack指令，就可以进行打包，出现下图所示，则代表打包成功。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 3]  
执行index.html文件进行测试  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 4]

# 4.项目内打包和全局打包 #

## 4.1简介 ##

刚才我们安装webpack的时候，在指令的最后加上了-g，则代表是全局安装，这样我们通过上面的指令进行打包的时候，就是进行的全局的webpack打包，但是实际生活中一个项目并不是只有一个人来进行开发，因此避免大家打包的webpack版本不一致的问题，就约定好大家都在项目内打包。

## 4.2安装 ##

在webstorm的终端中输入`npm install webpack@3.6.0 -d` (也可以换成`--save-dev`代表开发时依赖)代表本地安装webpack  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 5]

## 4.3package.json初始化配置 ##

在webstorm中输入npm init进行package的初始化，输入后就输入一些项目相关的参数，不想输入就一直回车。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 6]  
最后就会多出来一个这个配置文件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 7]  
打开这个文件找到如下图所以位置：  
然后添加自己的脚本名字，我这里是build，可以随便设置的。后面就写webpack，就代表打包操作。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 8]

## 4.4进行本地打包并测试 ##

通过`npm run build`进行本地打包，这里npm run后面的就是自己取的脚本名字  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 9]  
执行index.html测试：出现下图就代表成功了。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 10]

# 5.打包过程中出现的错误 #

## 5.1问题描述 ##

在cmd窗口明明看到了webpack安装成功的消息，但是webstorm中缺总是找不到node的指令。如图  
cmd窗口：  
![在这里插入图片描述][20210116143603581.png]  
webstorm窗口：  
![在这里插入图片描述][20210116143358645.png]

## 5.2问题原因 ##

一：很有可能是因为node的环境变量没有配置好。  
二：webstorm自己的原因(猜测可能跟个人的电脑设置等有关)

## 5.3解决方案 ##

建议先猜测是上面第二个原因，因为第二个原因的解决方案会比第一个快。  
方案一：  
通过管理员运行的方式打开webstorm，然后再进行打包操作。  
方案二：  
上网搜索node环境变量的设置。

博主是方案一解决的，因为我在cmd窗口都能显示版本号，因此环境变量应该没有出错。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70]: /images/20221119/725849b7aa8b45b0809155155db7d7d0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 1]: /images/20221119/cef172b717b548e4ba50ab4fd02bce53.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 2]: /images/20221119/edaba9767e654e5e822525d190f3fdd6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 3]: /images/20221119/995e0f0b29534852b3ec03acbe15e84b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 4]: /images/20221119/1ff312f545f54c64a1c8090f786f5631.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 5]: /images/20221119/cb53d49f06b64272bc1fb02526bc86e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 6]: /images/20221119/8e26b8539ef14efda8250c0ba4e16b6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 7]: /images/20221119/c6bab2e3c51d4dfa98a8a50943a50bb4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 8]: /images/20221119/f41b5937128d41ca860e940ec4c8dedb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 9]: /images/20221119/845f50908ece4d3aa9d71424e44f5663.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ_size_16_color_FFFFFF_t_70 10]: /images/20221119/d84896973b194dc8822a598389921d26.png
[20210116143603581.png]: /images/20221119/ba0d7fcc5e4548b091840f6839a89752.png
[20210116143358645.png]: /images/20221119/2092e53d8b194703bb8e508ca5a2d991.png