webpack

Myth丶恋晨 2024-04-03 10:00 9阅读 0赞

## 什么是webpack？ ##

#### 咱用大白话来说就是**将项目模块化文件打包生成普通的脚本文件，然后引入到index.html文件中。**要是想要更深入的理解的话就去康康[webpack][]官方的文档吧 ####

## 为什么要使用webpack？ ##

#### 因为开发的时候使用的是前端模块化，但是浏览器对模块化的支持程度低，需要借助webpack打包工具，将模块化代码打包生成浏览器支持的规范。 ####

## 使用： ##

#### 第一步：快速初始化文件夹成为一个项目 ####

cnpm init -y

#### 案例： ####

初始化了一个名为app01的项目：

![5388d8fad8844b62b0490255fcc24313.png][]

#### 第二步：安装 ####

cnpm i webpack webpack-cli --save-dev        //--save-dev 表示开发阶段

#### 根据需要下载第三方库 ####

#### 本文用到了qs 和lodash库 ####

cnpm i qs lodash -S

根据需求下载插件

本文下载两个插件

cnpm install --save-dev html-webpack-plugin

cnpm i --save-dev webpack-bundle-analyzer

#### 在app01项目下新建一个存放源码的文件夹 src ####

![769c1de825784fb4817ee162cb8243dc.png][]

各个文件的代码如下：

a.js文件代码：

import qs from 'qs';
    let obj={
        name:"lili",
        age:18,
    }
    export default {
        url:"/user/login ",
        data:qs.stringify(obj)
    }

b.js代码：

import _ from 'lodash';
    let obj={
        name:"xixi",
        age:15
    }
    export default _.cloneDeep(obj)

main.js代码：

import a from './a';
    import b from './b';
    import './style/style.css';
    import './style/main.scss'
    
    let dom =document.createElement('div');
    dom.innerText=JSON.stringify(a);
    document.body.appendChild(dom);
    
    
    let dom2 =document.createElement('div');
    dom2.innerText=JSON.stringify(b);
    document.body.appendChild(dom2);

style.css代码：

body{
        background-color: aqua;
        font-size: 28px;
        width: 100px;
    }

main.scss代码：

body{
       $color:rgb(3, 16, 16);
        color: $color;
       background-color: rgb(136, 207, 89);
    }

####  ####

#### 第三步：在webpack.config.js配置webpack ####

#### entry:"项目的入口文件"， ####

#### output："输出文件" ####

#### 插件：plugins:\[\] ####

下面就简单地三个插件吧，想要更多的了解的话就去文档里看吧因为插件属实有点多了。

1**.htmlWebpackPlugin** 自动生成打包后的html文件并自动引入打包好的脚本文件。

2.**webpack-bundle-analyzer** 可视化图形插件，分模块化大小。

3.**sliptChunks** 抽离公共重复的依赖，单独放在一个脚本文件，优点:优化前端性能。

#### loader 加载器 解释非js文件 比如sass css png等等。 ####

webpack.config.js文件代码：

在package.json文件添加打包的命令：

![b9426df26d2d4797ab9070e67c7f1b3f.png][]

执行打包命令：

npm run build

运行之后就会出现dist文件，运行dist文件里的index.html，运行结果如下：

![51c0d69ceb134e489eb7821a0228f181.png][]

使用webpack-bundle-analyzer的效果：

![1e20805e9df148168edaaf77aa25157c.png][]

[webpack]: https://www.webpackjs.com/
[5388d8fad8844b62b0490255fcc24313.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/a4e2a88b2caf4e52acb5e1053b5b2953.png
[769c1de825784fb4817ee162cb8243dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/f7acf8d59f80438ca805c3909256d2a3.png
[b9426df26d2d4797ab9070e67c7f1b3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/bb597674f5a94dce9624b827b5b95626.png
[51c0d69ceb134e489eb7821a0228f181.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/33d0997354e74c768618a1d5bb6c8b55.png
[1e20805e9df148168edaaf77aa25157c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/b99c7e845e264d15a45ebede66499895.png