从零教你使用webpack，从此项目打包不用愁

╰+攻爆jí腚メ 2022-10-05 04:59 268阅读 0赞

## webpack ##

*  问题  
    文件依赖关系错综复杂  
    静态文件请求效率低  
    模块化支持不友好  
    浏览器对高级JS特性兼容性不好

### 安装和配置 ###

--save-dev 也可以写作 -D，表示是开发依赖（开发阶段需要用到的包，项目上线运行后不需要）

初始化项目 `npm init -y`

跟目录下新建 src 目录，作为代码文件目录

src 下新建 index.html和index.js

index.html 中编写 html 代码

安装 jquery`npm i jquery`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]

安装 webpack  
通过命令`npm install webpack webpack-cli --save-dev`来进行安装

webpack 配置  
根目录下新建 webpack.config.js

module.exports={
        mode:'development' // 开发模式
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]  
配置启动命令  
打开 package.json ，在 scripts 属性中加入如下代码

`"dev":"webpack"`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]  
打包  
终端运行如下命令  
`npm run dev`  
成功后会在跟目录创建 dist 目录，并生成一个 main.js 文件  
运行  
在 index.html 中，引入 main.js，再次运行 index.html 即可成功

### 打包入口文件和出口文件 ###

*  入口文件

就是项目或程序被请求的时候，第一个被访问到的文件，此文件再找相对应的模块进行处理

在当前项目中，index.html 是入口文件，因为我们请求的就是 index.html

但是对于 webpack 来说，打包的入口文件是 index.js，因为 index.js 中引入了其他程序需要的模块，并编写了相应的逻辑代码

*  出口文件

打包之后的文件目录以及名称

webpack 有一些默认配置

入口文件：src/index.js  
出口文件：/dist/main.js  
重新配置入口文件和出口文件

const path=require('path')
    module.exports={
        mode:'development', // 开发模式
        entry:path.resolve(__dirname,'./src/index.js'),
        output:{
            path:path.resolve(__dirname,'./dist'),
            filename:"bundle.js"
        }
    }

运行 `npm run dev` 命令查看结果

根目录下会自动创建一个dist文件中，里面生成bundle.js文件  
![在这里插入图片描述][20210529113726822.png]

### 自动打包 ###

安装  
`npm install --save-dev webpack-dev-server`

修改 pacjkage.json 中的启动命令  
`"dev":"webpack serve --open"`

或者使用(–open 是自动打开浏览器，可以不加)  
`"dev":"webpack serve"`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]  
运行  
`npm run dev`

打开地址为：`http://localhost:8080/`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]  
原index.html中引入js文件为下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 5]  
运行后在`http://localhost:8080/`不需要做任何更改，浏览器会根据内容做更改的

### 生成预览页面 ###

当前存在的问题：localhost:8080 对应的是网站跟目录，index.html 在 src 目录下，访问起来比较麻烦

解决方案：可以将 src 目录下的 index.html 拷贝一份到根目录下，这样访问 localhost:8080 时，就会默认渲染 index.html

但是如果修改完 index.html 后还需要手动拷贝比较麻烦，可以使用插件：HtmlWebpackPlugin

安装  
`npm install --save-dev html-webpack-plugin`

安装完成后在webpack.config.js 中编写如下代码  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 6]  
重新运行`npm run dev`后会报如下错误![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 7]  
报此错误是我们缺少loader-utils依赖

执行如下代码则可以解决以上报错问题

`npm install loader-utils -D`

再次重新运行 npm run dev后

访问：http://localhost:8080/，就会运行index.html

但是跟目录下并没有 index.html ，因为其仍然创建在内存中

但是你会发现有一个自己引入的js文件（无效了），系统会自动将根目录下的bundle.js文件给你引入进来  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 8]

### 加载器 ###

webpack 默认只能打包 .js 模文件，其他静态文件，如 .css，图片等默认不能处理，如果不加载对应的加载器，则会报错

webpack 支持使用 loader对文件进行预处理。你可以构建包括 JavaScript 在内的任何静态资源。并且可以使用 Node.js 轻松编写自己的 loade

下面的图说明了webpak如何处理各种文件类型![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 9]

### 处理css文件 ###

src 目录下新建 css 目录，新建 index.css

编写样式

* {
        margin: 0;
        padding: 0;
    }
    
    ul {
        list-style-type: none;
    }
    
    li {
        line-height: 45px;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 10]  
但是在打包时会报如下错误  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 11]  
由此可见，没有对应的 loader，webpack 打包时无法处理 css 文件

安装处理css样式对应的 loader

`npm install --save-dev css-loader style-loader`

配置 webpack.config.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 12]  
配置完以后重新运行 npm run dev即可

注意：  
![在这里插入图片描述][20210529114059193.png]  
这两个不可反写（loader 的调用是从后往前掉）

### 处理less文件 ###

安装

`npm install less-loader less -D`

rules 中增加一条  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 13]  
css 目录中新建 inde.less

body {
        background-color: #ccc;
    
        ul {
            list-style-type: none;
    
            li {
                line-height: 35px;
            }
        }
    
    }

我们的vscode中可能添加了某些使less文件自动转换为css文件的插件，可以取关掉它，效果更佳

index.js中引入inde.less  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 14]  
重新运行 `npm run dev`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 15]

### 图片处理 ###

安装  
`npm i url-loader url-loader -D`

配置 webpack.config.js

{
        test: /\.jpg|png|gif|bmp|jfif|ttf|eot|svg|woff|woff2$/,
        use: [{
            loader: 'url-loader',
            options: {
                limit: 614400 // 代码中使用的图片为500k
            }
        }]
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 16]  
在src中新建文件夹images中放入一张图片![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 17]  
将此图片给body设置为背景![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 18]  
配置完一定要重新运行`npm run dev`  
如果图片大于我们设置的大小，返回的则是资源文件  
如果图片小于我们设置的大小，返回的则是base64 编码

关于图片的 base64 编码

> 图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图像地址  
> .  
> 这样做有什么意义呢？我们知道，我们所看到的网页上的每一个图片，都是需要消耗一个 http 请求下载而来的（所有才有了 csssprites技术的应运而生，但是 csssprites 有自身的局限性，下文会提到）  
> .  
> 没错，不管如何，图片的下载始终都要向服务器发出请求，要是图片的下载不用向服务器发出请求，而可以随着 HTML的下载同时下载到本地那就太好了，而 base64 正好能解决这个问题

### 处理高级js语法 ###

babel 用于将js的新语法和特性转换为浏览器支持的语法

安装babel转换器相关包

`npm install -D babel-loader @babel/core @babel/preset-env`

webpack.config.js 中添加如下规则

{
        test: /\.m?js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
            loader: 'babel-loader',
            options: {
            presets: ['@babel/preset-env']
            }
        }
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 19]  
在 index.js 中编写如下代码

class Person {
        static age = 20
    }
    console.log(Person.age);

重新运行`npm run dev`进行打包

会报如下错误  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 20]  
错误原因在于没有安装babel 语法的相关插件

安装  
`npm i -D @babel/plugin-proposal-class-properties`

然后在上面规则的 option 属性中添加配置

options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/plugin-proposal-class-properties'] // 新加的配置
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 21]  
再次重新运行`npm run dev`进行打包就可以了

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70]: /images/20221005/623105038f20415d8a51110e890e6a77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 1]: /images/20221005/5f3b8dff4986416098ac0b07fcdee024.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 2]: /images/20221005/9d24f6f10a824249ab5020f062600588.png
[20210529113726822.png]: /images/20221005/4546511cf6d34c00a0209a4732af0fbc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 3]: /images/20221005/37bef49bb239436aa38b896aeb9d0bef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 4]: /images/20221005/07e29cebde5e4c8fafeac2bb4fff49e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 5]: /images/20221005/bd195a35a8c749a4a569945f094e63c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 6]: /images/20221005/50558b764938487cbc1cbbbf0928bdff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 7]: /images/20221005/8890eda8d9f2476796687dba33b9ece0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 8]: /images/20221005/bcae90e003d3432d9d87b77549c96ffe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 9]: /images/20221005/192c2ace65324c678ab0a03e5fe11b73.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 10]: /images/20221005/0020711e935d4a1fba1f418ff7758433.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 11]: /images/20221005/02d346a83c9244a5aaf86a0ea013c9bf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 12]: /images/20221005/77a3cec84cbe431da251d96ef52ef3e6.png
[20210529114059193.png]: /images/20221005/dc49c67ce5f149c586e58c89f9b52734.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 13]: /images/20221005/f8dff453bc8e437489bb02b560945489.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 14]: /images/20221005/2ebd616cab22425fb878b931bb502916.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 15]: /images/20221005/df2694fa673246398e3f1923fa97de26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 16]: /images/20221005/51853e3c6ef5463d83df8b913a90a0b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 17]: /images/20221005/544bf52657f14b3095b5de3b172b2662.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 18]: /images/20221005/58448f4213ef49529852dcc3af5e48d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 19]: /images/20221005/05eafe73799148b18f51c88185d01c2e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 20]: /images/20221005/2f007f0d0d834960816ab4f870ca71e6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2JsdWVfNjk4_size_16_color_FFFFFF_t_70 21]: /images/20221005/96e2d84772a54dcd8bc92b4ea9b97740.png