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,命名不可以改变。
使用插件时,先安装所需插件,然后定义常量例如下图的const HtmlWebpackPlugin=require('html-webpack-plugin'),其中require是引用插件,插件需要在plugins中实例化一下,即下图的new HtmlWebpackPlugin({}).
引入了一个创建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: