Webpack学习笔记（1）

1.为什么使用webpack?

webpack不仅可以打包js代码，并且那个且支持es模块化和commonjs,支持其他静态资源打包，如图片、字体。。。

2.如何解决作用域问题？

作用域问题：例如loadsh等库，会绑定window对象，会使得window臃肿。

grunt和gulp是最早使用的任务执行器，是将所有的项目文件拼接在一起（IIFE）,从而解决了大型作用域问题。

当函数变成了一个立即调用的表达式时，表达式中的变量不能够在外部访问，不会污染window，解决了作用域问题。

如果部分暴露，部分不暴露，我们可以这样解决 

3.如何解决代码拆分问题？

问题：如果处理一个大的文件，用户需等待一段时间才可以加载成功（白屏）。

解决：node.js模块化处理。

common.js：浏览器不支持模块化

暴露方法：

引用（开箱即用）：

4.如何让浏览器支持模块？

解决：使用require.js

define定义依赖和真正暴露：没有依赖前面为【】

如何加载文件：（在index.html使用script标签加载，data-main='入口文件路径'）

入口文件访问文件：访问目录点（位置）还在index.html

解决：ESMAScript模块化<script type='module>

暴露：export default xxx

引入：import 名字 from '路径'

出现跨域问题：npx http-server

npx:当某个模块不存在时，从互联网帮忙安装一个模块

5.webpack,parcel,rollup,vite

6.安装运行webpack

npm i webpack webpack-cli

npx webpack

7.插件是什么？

创建webpack.config.js，命名不可以改变。

引入了一个创建html文件的插件HtmlWebpackPlugin

8.搭建开发环境

开发模式：

npx webpack --watch 监听但手动刷新

安装webpack-dev-server，热模块更新。

npx webpack-dev-server --open,自动打开

配置dev-server，当前服务的根目录

9.资源模块介绍

asset Moudle 允许使用webpack打包其他资源文件

1.asset/resource:发送一个单独文件并导出url；

2.asset/inline：导出一个资源的dataurl;

3.asset/source：导出资源的源代码；

4.asset：通用资源类型，在导出dataurl和单独文件之间选择一个导出。

webpack.config.js中设置module属性：

上图使用asset/resource打包.png后缀的文件；使用asset/inline打包.svg后缀的文件；使用asset/source打包.txt后缀的文件；使用asset打包.jpg后缀的文件，在使用asset时可以自定义资源界限，默认是小于8kb会被视为inline模型，反之是resource模型。

在output中设置也是自定义文件名和路径优先级低于在generator设置。

index.js: