wap网站欣赏,单位网站建设收费标准,网站建设特效大全,WordPress网站htm地图1.为什么使用webpack?
webpack不仅可以打包js代码#xff0c;并且那个且支持es模块化和commonjs,支持其他静态资源打包#xff0c;如图片、字体。。。
2.如何解决作用域问题#xff1f;
作用域问题#xff1a;例如loadsh等库#xff0c;会绑定window对象#xff0c;会…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 typemodule
暴露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:
