Vue初识系之Webpack

ゝ一世哀愁。 2024-03-30 17:09 50阅读 0赞

#### 文章目录 ####

*  一 Webpack简介
 *  二 Webpack的安装和使用
 *   *  2.1 安装Webpack
     *  2.2 配置参数初识
     *  2.3 使用webpack

## 一 Webpack简介 ##

*  **webpack本质上是一个现代JavaScript应用程序的静态模块打包器（modulebundler）。**
 *  当webpack处理应用程序时，它会递归地构建一个依赖关系图（dependencygraph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle
 *  Webpack是当下最热门的前端资源模块化管理知打包工具，它可以将许多松散耦合的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分离，等到实际需要时再异步加载。通过loader转换，任何形式的资源都可以当做模块，比如commonsJs、AMD、ES6、CSS、JSON、Coffeescript、LESS等；
 *  前端开发和其他开发工作的主要区别，首先是前端基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器的，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统。

## 二 Webpack的安装和使用 ##

*  Webpackd是一款模块加载器兼打包工具。他能把各种资源如GS 、ES6、SASS图片等都作为模块来处理和使用。

### 2.1 安装Webpack ###

npm install webpack -g
    npm install webpack-cli -g

![在这里插入图片描述][43e44f895a7d4f1ea49974573698271b.png]

*  如果没有报错的话，基本上就安装成功了。
 *  下面的命令可以看到webpack的使用方法

webpack --help

![在这里插入图片描述][8a96524487b94e4cb5abb4567f56f440.png]

### 2.2 配置参数初识 ###

*  webpack.config.js配置文件参数

<table> 
 <thead> 
  <tr> 
   <th>参数名</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>entry</td> 
   <td>入口文件，指定WebPack用哪个文件作为项目的入口</td> 
  </tr> 
  <tr> 
   <td>output</td> 
   <td>输出，指定WebPack把处理完成的文件放置到指定路径</td> 
  </tr> 
  <tr> 
   <td>module</td> 
   <td>模块，用于处理各种类型的文件</td> 
  </tr> 
  <tr> 
   <td>plugins</td> 
   <td>插件，如：热更新、代码重用等</td> 
  </tr> 
  <tr> 
   <td>resolve</td> 
   <td>设置路径指向</td> 
  </tr> 
  <tr> 
   <td>watch</td> 
   <td>监听，用于设置文件改动后直接打包</td> 
  </tr> 
 </tbody> 
</table>

module.exports = {
         
        // 入口文件
        entry:"./src/index.js",
        // 打包后的出口文件
        output:{
        
            path: "xxxxxxxxx",
            // 输出的文件名称
            filename: 'xxxx',
        },
        // 使用开发模式打包
        mode:"development",
        plugins: {
        },
        resolve: {
        },
        watch: true
    }

### 2.3 使用webpack ###

1.  创建文件夹  
    ![在这里插入图片描述][189bf565f18a4f6ba1e1a8c56a8acc86.png]
2.  创建一个名为modules的目录，用于放置JS模块等资源文件  
    ![在这里插入图片描述][d7378095ae54478ca8822f3b73adc998.png]
3.  在modules下创建一个名为hello.js的文件，暴露一个方法

*  hello.js

//暴露一个方法
    exports.sayHi=function () {
        
        document.write("<h1>hello</h1>")
    };

1.  在modules下创建一个名为main.js的入口文件【用于打包时设置entry属性】

*  main.js

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

1.  在项目目录下创建webpack.config.js配置文件，使用webpack命令打包

*  webpack.config.js

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

1.  在项目目录下创建HTML页面，并导入入webpack打包后的简安文件

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

1.  在IDEA控制台中直接执行webpack；如果失败的话，就使用管理员运行即可

webpack

![在这里插入图片描述][45fc77d208d64974a4c62f9b9260aa56.png]  
8. 运行HTML  
![在这里插入图片描述][75e1bf484d0c4d17a857d4816f2e11a7.png]

[43e44f895a7d4f1ea49974573698271b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/82102b07878b412095b988ad52a4e455.png
[8a96524487b94e4cb5abb4567f56f440.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/935be41a83b7414b853beee674136a7a.png
[189bf565f18a4f6ba1e1a8c56a8acc86.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/e5313fc0461d44059550d9bcf89c772e.png
[d7378095ae54478ca8822f3b73adc998.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/011cfc0c671e44b69d2180d40ab9013a.png
[45fc77d208d64974a4c62f9b9260aa56.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/61c287b6ed864cf3ab4728abf5eb90f1.png
[75e1bf484d0c4d17a857d4816f2e11a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/7f7419ecba0b43bda1e5c4cfee41b464.png