webpack 基础理解[一]

深藏阁楼爱情的钟 2023-01-18 04:12 190阅读 0赞

> 好久好久好久 没有更新CSDN 了 ，四月两次奔波回家，转项目组，加班，整个时间被工作和紧张情绪充斥，现在现在，终于可以喘口气，整理记录webpack 系列。

## webpack 是什么？干什么？ ##

webpack 是构造工具，怎么构造？就是 把浏览器不认识的一些文件 或者支持不好的文件 ，编程成浏览器认识的文件或者代码。

## webpack 里的基础配置 ##

### **webpack 默认打包配置** ###

**：**webpack 在打包的时候会去找webpack.config.js 文件，如果没有，走自己默认的配置。

// webpack 是基于nodeJS 的 ，可以引用node 中的path 模块
    const path = require('path')
    module.exports = {
        // 入口文件 项目入口
        entry: './src/index.js',
        // 项目出口 出口
        output: {
            path: path.resolve(__dirname, './dist'),
            // 构建出的文资源文件名
            filename: "main.js"
        }
    }

从webpack 的默认配置可以知道 ，webpack的配置就是一个对象

entry:项目入口文件 支持三种类型 **字符串 数组 对象**

设置**多入口要使用对象**，**同时配置多出口，多出口时不能设置 filename 为固定值，不然多个入口的输出文件会有问题，文件名可以使用占位符**。

如下：

// webpack 是基于nodeJS 的 ，可以引用node 中的path 模块
    const path = require('path')
    module.exports = {
        // 入口文件 项目入口
        // entry: './src/index.js',
        // entry: ['./src/index.js', './src/other.js'],
        entry: {
            index: './src/index.js',
            other: './src/other.js'
        },
    
        // 项目出口 出口
        output: {
            path: path.resolve(__dirname, './dist'),
            // 构建出的文资源文件名
            // filename: "index.js"
            filename: '[name].js'
        }
    }

**其中数组的配置方式：**

webpack 会自动生成另外一个入口，并将数组中的每个制定的模块加载进来，并将最后模块的module.exports 作为入口的 module.exports 导出。

了解到这里，我理解 现在vue 项目大多数不需要配置，而且新的版本webpack 的配置文件名而有所改变，推测是 Vue 做了相应的配置和封装。

### **loader** ###

webpack 默认支持 .json 和 .js 模块，不支持不认识的其他格式的模块，如果想让webpack构建的时候认识，那么就需要各种 loader 的帮助了，也因此，安装这些 loader 的时候只安装在开发环境就好了。

### Plugins ###

*  作用于 webpack 打包的整个过程
 *  webpack 打包过程是有（生命周期概念）钩子的

plugins 可以在webpack 运行到某个阶段的时候，帮你做一些事情，类似于生命周期概念。

扩展插件：在 webpack 构建流程中特定时机注入扩展逻辑来改变构建结果或者你想做的事情作用于整个构建流程。

> **HTMLWebpackPlugin**   
> htmlwebpackplugin 会在打包结束后，自定生成一个 html 文件，并把打包生成的 js 模块引入到该 html 中。
> 
> npm install --save-dev html-webapck-plugin

案例：

const path = require("path")
    const htmlWebpackPlugin = require("html-webpack-plugin");
    module.exports={
    ...
    plugins:[
    new htmlWebpackPlugin({
    title:'My App',
    filename:'app.html',
    template:'./src/index.html'
    })
    ]
    }
    
    //index.html

## 总结 ##

webpack 最基础的配置 入口文件 ，出口文件 即路径配置，在我们常用的webpack 配置中会使用到很多的loader ，插件的帮助，方便我们开发的书写。

> 积跬步 至千里

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NhbmR5X3poaQ_size_16_color_FFFFFF_t_70]: /images/20221021/ad6523137202466a8530e557b884e7a8.png