webpack5

1.webpack
webpack是一个前端构建工具，就是把开发环境的代码转化成运行环境代码，将JS、CSS代码混淆压缩，让代码体积更小，加载更快。
2.创建一个简单的webpack
（1）创建文件夹webpack-demo
（2）在命令提示符中执行以下命令：

cd webpack-demo
npm init -y 
npm i webpack webpack-cli -D

（3）项目中创建src文件夹以及 index.html index.js index.cs
（4）项目中新建webpack.config.js，cmd中执行如下命令

npm i html-webpack-plugin -D
npm i css-loader -D
npm i style-loader -D

（5）终端运行npm run build，则会产生一个dist文件，此时文件被打 包在dist中
3.entry入口文件
应用打包入口可以是一个，也可以是两个，单独打包出一个文件可以使用dependOn。
4.output输出构建产物
"构建产物输出" 通常用于描述在软件开发和构建过程中生成的可执行文件、库、资源文件等。这些产物通常是开发人员在开发软件时所期望的最终结果，用于部署、测试或运行软件。在不同的上下文中，构建产物的具体含义可能会有所不同。例如：
（1）编译过程：在编译过程中，源代码会被转换成机器代码或字节码，这些代码可以直接由计算机执行。编译器的输出就是构建产物。
（2）打包过程：当开发人员希望将他们的软件分发给其他人时，他们可能会使用打包工具（如Docker、NuGet、npm等）来创建一个可分发的包。这个包就是构建产物。
（3）持续集成/持续部署（CI/CD）流程：在CI/CD流程中，每次代码提交后，会自动触发一个构建过程。这个过程可能会编译代码、运行测试、打包应用程序等。最终的产物（如可执行文件、测试报告、部署包等）也是构建产物。
5.loader资源处理
5.1 loader用于处理和转换资源，例如JS、CSS、图片等，以便它们可以在浏览器中正确加载和执行。
（1）定义：在Webpack中，loader是一个或一系列的插件，用于转换资源文件。这些转换可以包括压缩、美化、图片压缩等。
（2）使用：在Webpack配置文件中，你可以指定哪些文件或模式应该通过特定的loader进行处理。
（3）自定义loader：除了Webpack提供的默认loader外，你还可以创建自己的loader来满足特定的需求。这通常涉及到编写一个Node.js模块，该模块使用Webpack的API来转换资源。
5.2 css-loader、style-loader和scss-loader
5.2.1 css-loader：CSS-Loader是Webpack中的一个插件，能够将CSS文件转化为JavaScript模块，以便在JS中使用。具体来说，CSS-Loader会将CSS文件中的样式代码解析为JavaScript对象，然后通过module.exports输出这个JavaScript对象。
5.2.2 style-loader：style-loader的作用是将解析后的css代码从js中抽离，放到头部的style标签中（在运行时做的）。简单来说，style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中。
5.2.3 scss-loader：Vue SCSS-loader的主要作用是将SCSS文件转换成CSS文件，并且将CSS代码注入到Vue组件中。这样就可以在Vue组件中使用SCSS了。
6.plugin
插件可以在打包过程中的不同阶段执行操作，例如压缩代码、添加元数据等。插件接口功能极其强大，可以用来处理各种各样的任务。插件通常用于完成定制化操作。Webpack通过插件和加载器的组合使用，可以实现更丰富和灵活的打包功能。
插件可以在Webpack的配置文件（webpack.config.js）中通过plugins属性进行实例化配置。每个插件可以对外暴露一个js函数，该函数的原型上定义了一个注入compiler对象的apply方法。在apply函数中，插件可以通过compiler对象挂载的webpack事件钩子，监听webpack打包过程中的事件，并在事件回调中执行相应的操作。
7.mode
在Webpack中，mode用于告知Webpack采用哪种模式进行构建。
Mode有三种值：none、development和production。
development : 开发模式
production： 开发完成 打包上线时使用得模式
none： 不使用任何默认优化选项
8.Devtool：source map
线上使用过程中代码出现故障，这时候就需要用到sourcemap
9.开发环境模式 devserver
热更新：一种Webpack的功能，全称为Hot Module Replacement，简称HMR。在开发过程中，热更新能够实现模块的动态替换和更新，而无需刷新整个页面。它允许开发者在保持应用状态的同时，实时预览修改的效果，从而提高开发效率。
热更新实现：

问题回答
webpack是什么，它主要的作用
Webpack是一个用于现代JavaScript应用程序的静态模块打包工具。
1.模块整合：Webpack可以将多个JavaScript文件打包成一个或多个输出文件，减少了网络请求次数，提高了网页加载速度。同时，Webpack还支持将其他类型的文件，如CSS、图片、字体等文件，作为模块进行打包。
2.代码转换：Webpack可以使用各种加载器（loader）将不同类型的文件转换为JavaScript模块，以便Webpack打包。
3.代码分割：Webpack支持将代码分割成多个块（chunk），实现按需加载，提高了网页的加载速度。同时，Webpack还支持动态加载代码块，实现更灵活的加载策略。
4.优化输出：Webpack可以对输出文件进行优化，如压缩代码、提取公共代码等，以减少输出文件的大小，提高网页加载速度。

开发过程中你遇到了什么问题 怎么解决的
创建一个简单的webpack文件时，其中一步创建src文件，index.css，index.html，index.js放在src下，应将src建成了目录形式，导致最终运行错误。

entry 的配置方式
1.字符串方式：将entry配置为一个字符串，指向一个入口文件。Webpack会将这个入口文件作为起点，递归地解析其依赖项，并将所有依赖项打包成一个或多个输出文件。
2.对象方式：将entry配置为一个对象，对象的属性是入口文件的名称，值是入口文件的路径。这种方式可以指定多个入口文件，Webpack会为每个入口文件生成一个独立的输出文件。
3.数组方式：将entry配置为一个数组，数组中的每个元素都是一个入口文件的路径。Webpack会按照数组的顺序将多个入口文件打包成一个输出文件。

什么是跨域
跨域是指一个域下的脚本请求另一个域下的资源。这是由浏览器的同源策略（Same origin policy）造成的，是浏览器保护用户的一种安全限制。同源是指协议、域名、端口号均相同，如果其中一个不同，则属于跨域。

使用 --mode=development 打包后变化在哪
使用--mode=development进行打包，与使用默认的-mode=production相比，主要会有以下几方面的变化：
1.代码压缩和优化：在开发模式下，Webpack不会对代码进行全局压缩和最小化。这使得代码更易于阅读和调试，但也会增加输出文件的大小。
2.开启Source Maps：在开发模式下，Webpack会生成Source Maps文件，这些文件将帮助开发者在浏览器中更轻松地调试打包后的代码。
3.开启HMR（热模块替换）：HMR允许开发者在不刷新浏览器的情况下实时更新代码，从而提高开发效率。
4.开启devtool：开发模式下，Webpack会使用一种称为devtool的机制来提供更详细的源码映射信息，以便于开发者在生产环境和开发环境之间进行更有效的调试。

webpack的工作原理
1.模块化处理：Webpack将所有的资源文件看作模块，通过配置入口文件，Webpack从入口起点开始，构建出一个完整的依赖关系图，将所有模块按照依赖关系进行组织。
2.编译和打包：Webpack使用编译器将模块转换成浏览器能够执行的代码，对于JavaScript，会编译成ES5或ES6等低版本，以便在更多浏览器上运行。对于CSS，会进行相应的转换处理。同时，Webpack还会将所有的模块打包成一个或多个bundle文件，以便浏览器加载和使用。
3.代码分割：Webpack可以将应用程序拆分成多个bundle，每个bundle包含一部分代码，这样可以按需加载或并行加载，提高应用程序的加载速度。
4.插件扩展：Webpack通过插件机制，可以扩展其功能。插件可以在Webpack打包的过程中添加各种功能，如压缩、热更新、资源管理等
5.配置文件：Webpack通过配置文件来定义如何处理不同类型的资源文件。配置文件中可以指定入口文件、输出文件、加载器、插件等。