webpack入门指南（图文）

矫情吗；* 2023-07-16 13:58 1阅读 0赞

## webpack入门 ##

**1、安装node.js**  
[点击进入官网][Link 1]下载最新版本的node.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]  
按照安装指引安装即可。  
可以cmd，输入node验证成功与否  
![在这里插入图片描述][2020031820272571.png]  
**2、安装webpack**  
cmd，输入如下指令，-g表示全局安装

npm install webpack -g

完成后再输入，安装打包工具

npm install webpack-cli –g

验证：  
![在这里插入图片描述][20200318204134627.png]  
**3、使用**  
VS下写好HTML文件

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../dist/bundle.js"></script>
    </head>
    <body>
        <p>点击我，我将变成红色！</p>
    </body>
    </html>

在终端下面输入如下代码初始化，生成package.json

npm init -y

![在这里插入图片描述][20200318205357413.png]  
安装jq到项目,生成package-lock.json和node\_modules文件夹

npm i jquery -s

![在这里插入图片描述][20200318205510441.png]  
![在这里插入图片描述][202003182055298.png]  
编写main.js

import $ from 'jquery'
    
    $(document).ready(function(){ 
        $("p").click(function(){ 
        $(this).css('color','red');
        });
      });

在项目的目录下编写webpack.config.js

const path = require('path')
    
    module.exports = { 
        entry:path.join(__dirname,'./src/main.js'),//输入目录
        output:{ 
            path:path.join(__dirname,'./dist'),//输出目录
            filename:'bundle.js'               //文件名，对应HTML的js文件
        },
        mode: 'development' 
    }

终端输入webpack  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 1]  
结果：  
点击前  
![在这里插入图片描述][20200318210905550.png]  
点击后  
![在这里插入图片描述][20200318210932241.png]  
自此就入门完成，我是个菜鸟，花了一个下午才搞定入门。

[Link 1]: https://nodejs.org/en/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70]: /images/20230528/1e1a961410bb472a8c71271d96da2cb3.png
[2020031820272571.png]: /images/20230528/967f00c0059b496eb1923c617654f2b2.png
[20200318204134627.png]: /images/20230528/ae47624b9f1a45788ba7918a4d5138bf.png
[20200318205357413.png]: /images/20230528/f6160a29814a4814a2aa819c67aa6b39.png
[20200318205510441.png]: /images/20230528/5bde25e20f0443659ae67dff07e3620f.png
[202003182055298.png]: /images/20230528/8fffbcaa32694690826fa3b4b05afeb9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzUyMDY3MA_size_16_color_FFFFFF_t_70 1]: /images/20230528/f6f7902c29e74f928a6109624f72818a.png
[20200318210905550.png]: /images/20230528/043c59637e83445bbc2a6660018bc4e4.png
[20200318210932241.png]: /images/20230528/f46f251089fd487d9b100bd46c784549.png