Webpack的使用

傷城~ 2022-12-02 15:06 153阅读 0赞

**Webpack 的使用**

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

**安装webpack：**

cnpm install webpack -g
    
    cnpm install webpack-cli -g

**查看安装版本：**

webpack -v
    4.44.1
    
    webpack-cli -v
    3.3.12

**使用webpack：**

*  **创建一个空文件夹 mywp01 作为项目目录**
 *  **创建 modules 文件夹，在该文件夹内创建 hello.js 和 main.js**

**hello.js**

exports.sayHi = function () { 
        document.write("<h1>Hello,BLU!</h1>")
    }

**main.js**

var hello = require("./hello");
    hello.sayHi();

*  **在 mywp01 目录下创建 webpack.config.js 文件：**

module.exports = { 
      entry: './modules/main.js',
      output: { 
          filename: "./js/bundle.js"
      }
    };

*  **使用 webpack 命令打包，在 dist/js 目录下生成了 bundle.js 文件**

*  **创建 index.html 文件并引入生成的 bundle.js 文件**

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JMVV8xMTE_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/473fadb2a7b449d48999eb1c19d370d2.png