webpack

真的好累啊

什么是webpack

webpack是一个现代javascript应用的静态模块打包工具，其主要功能就是模块和打包

这里我一直觉得和maven很像，早在之前的学习过程中，maven具体的工作是什么我一直百思不得其解，认为我们普通的java程序就能够很好的跑起来为什么还要maven呢？

这里先说webpack，

模块化前端：

（这里我插一句嘴，这里的模块可以看作java中的类，但是不一样，不一样，不一样。块内的数据是私有的只是暴露一些接口与外部的其他模块进行通信）

早在之前模块化的概念就被提出并且执行，不过那个时候模块化开发必须借助其他工具，并且在完成代码的编写之后，还需要处理模块之间的各种依赖关系，（这里我必须插一嘴什么是依赖，标识这个项目需要依靠其他的组件库或者组件才能够运行，在java的开发中，通常使用maven或gradle构建工具来管理依赖，前端的工具也有很多这里我只学习webpack，之后的话还会考虑学习最近很火的vite。）并且将其进行整合打包。在webpack中不仅仅javascript可以被当作模块来使用，基本的图片，css，json文件等等都在webpack中都可以被当作模板来使用，这就是webpack中模块化的概念。

打包：

将webpack中的各种资源进行打包，并且打包的过程中进行资源的处理，比如将scss转换成css，将ES6转换成ES5，等等，（这里我再次插一句嘴，这里的包的概念，不是java中的package，这里的打包是bundle，是一个十分抽象的概念，把多个文件整合成一个文件的过程就是打包，举个例子，在之前我们都知道可以使用script标签来进行插入javascript代码，这个时候的javascript必须要依靠浏览器和html才能够运行的起来，如果没有html那就没有用，直到node的出现才能够，让javascript在终端运行，这个时候我们就能够像后端一样，将这些代码用import，export，require连接起来，但是在网页中这些连接的方法不能够使用，这个时候webpack的作用就来了，将代码打包处理文件之间的关系，让import等能够在html中使用，没讲清楚但是我能理解：-p）

webpack打包数据的流程

读取webpack的配置参数，
启动webpack，创建compiler对象并且开始解析项目，
从入口文件开始解析，并且导入依赖模块，递归遍历分析，形成依赖树
对不同文件类型的依赖模块文件使用对应的loader进行编译，最终转换成javascript文件，
整个过程中webpack会通过发布订阅模式，像外抛出一些hooks，为webpack插件即可通过监听这些关键的事件节点，执行插件认为u进而达到干预输结果的目的。

再往深处将就离谱了，就是原理了，目前也没有必要知道，目前来说吧除了搭建node服务器和vue使用过webpack以外，其他的地方暂时还没有用到。

这里开始我的正文：

webpack的安装和基本使用

因为webpack是node.js写的，所以在项目开始的时候 npm install webpack webpack-cli --dev

这里我选择使用yarn add -D webpack webpack-cli安装webpack的依赖

（这里我再次插一句嘴，-D表示这个依赖是开发依赖，就是指在编写代码的过程中需要使用的依赖，如果不加-D那引入的就是生产依赖，表示这个依赖在我开发的时候要用，开发完成执行项目的时候也需要引用。）

使用的步骤：

初始化项目yarn init -y
安装依赖
在项目中创建src目录，然后编写代码（index.js）这是默认的文件，之后会学习如何让更改注意*这里src下的文件是要给浏览器使用的使用的是ES规范而不是node规范，但是当离开src之后，外部的代码全部都是依赖于node的使用的是commonJS规范。
执行yarn webpack命令打包项目

这里要说明一下，webpack在打包我们的文件的时候，会遍历我们的代码，当我们的模块暴露了但是没有被index.js引用，那么在打包好的js文件之中就不会引用该模块，（当然这里有个前提需要我们在，webpack的webpack.config.js中需要配置一行代码：mode:"production"设置打包模式，设置为生产模式，同理还有development可以将模式设置为开发模式。）但是如果模块中写了函数和表达式，虽然没有暴露但是在引用的过程中webpack还是会将这些代码进行打包。

entery

在webpack.config.js文件中添加entey:" "，这行代码用来指定打包时候的主文件，默认是./src/index.js,如果你要修改主文件则添加主文件的路径，但是这个我们这个作为习惯，之后尽量不要修改。

entry的值可以是一个字符串，也可以是一个数组，还可以是一个对象，当这个值是一个对象的时候，就不会再打包成一个dist.js文件，就会根据对象的属性名打包属性值的文件，生成对应属性名的多个打包好的文件。

这里举个例子：

module.exports = {
    mode:"production",

    // entery:".src/a.js,"

    // entery:["./src/a.js","./src/b.js"],
    
    // entery:{
    //     a:'./src/a.js',
    //     b:'./src/b.js'
    // },
}

output

顾名思义上一个是入口，那么这个就是出口

    output:{
        path: path.resolve(__dirname,"hello"), //指定打包的目录这里必须使用绝对路径
        filename:"main.js",//打包后后的文件名
        clean:true,//自动清理打包目录
    }

属性有很多，这里仅仅介绍一下，多了的得去自己学

loader

关键东西

webpack默认情况下只能处理js文件，举个例子如果想要处理css文件就需要引入cssloader。

以下以css为例子：

使用css-loader可以处理js中的样式

使用步骤：

安装：yard add css-loader -D

配置：

webpack.config.js

    module:{
        rules:[
            {
                test:/\.css$/i,
                use:"css-loader"
            }
        ]
    }

原理是直接将css转换成js代码，单一职责，意思是这玩意只负责将css打包，不负责将css生效

于是为了让css生效必须继续引入一个loader


    module:{
        rules:[
            //css
            {
                test:/\.css$/i,
                use:["style-loader","css-loader"]
            },
            //图片类型
            {
                test:/\.(png|svg|jpg|jpeg|gif)$/i,
                type:'asses/resource'
            }
        ]
    }

use的顺序很重要，因为loader是从后往前执行的，顺序不能乱，活该被vite取代

babel

一个工具可以将新的js代码转换成旧的js代码，提高代码的兼容性

1.npm install -D babel-loader @babel/core @babel/preset-env webpack

安装babel

2.webpack.config.js


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

3.再package.json配置浏览器

plugin

插件用来为webpack扩展功能

html-webpack-plugin

这个插件可以打包完成之后，自动生成html页面
使用步骤：

安装依赖

yarn add html-webpack-plugin -D

2.配置插件


plugin:{
    new HTMLPlugin({
        title:"Hello Webpack"，//更换生成html的title标签
        template："./sec/index.html"//这里的html文件是一个模板，之后生成的html文件都是按照这个html为模板生成的。
    })
}