wordpress整站备份,网页素材有哪几大类,成都app开发公司排名,桂林网警一#xff1a;什么是webpack
webpack是一个用于现代JavaScript应用程序的静态模块打包工具。本质是一个软件包#xff0c; 静态模块包括以下#xff1a;html、css、js、图片等固定内容的文件
二#xff1a;webpack工作原理 当 webpack 处理应用程序时#xff0c;它会在内…一什么是webpack
webpack是一个用于现代JavaScript应用程序的静态模块打包工具。本质是一个软件包 静态模块包括以下html、css、js、图片等固定内容的文件
二webpack工作原理 当 webpack 处理应用程序时它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)然后将你项目中所需的每一个模块组合成一个或多个 bundles它们均为静态资源用于展示你的内容。 所谓依赖图当一个文件依赖另一个文件时webpack都将文件视为直接存在依赖关系。
三webpack使用流程
新建并初始化项目编写业务源代码下载webpack webpack-cli到当前项目中(本地软件包)并配置局部自定义命令webpack源码会自动下载到node_modules中运行打包命令自动产生dist分发文件夹压缩和优化后用于最终运行的代码
四打包入口起点打包文件的主入口
1单个入口语法
module.exports{entry:{main:输出路径}
}
//简写形式如下
module.exports{entry:输出路径
}2 对象语法
五打包出口写入编译软件
通过output选项告知webpack如何向硬盘中写入编译文件。 注意即使可以存在多个entry起点但只能指定一个output配置。
1 用法
在output选项中配置filename属性。用于规定输出的文件名配置
module.exports{output:{filename:bundle.js(输出规定的文件名)}
}2 多个入口起点
六利用Webpack处理css代码
1 打包CSS代码
将css引入js入口文件默认src/login/index.js中下载css.loader解析css代码和style.loader把解析后的css代码插入到DOM中本地软件包配置webpack.config.js让Webpack拥有该加载器功能打包后观察结果
2 提取CSS代码
1 为什么要提取css代码为一个独立文件
浏览器可以缓存css文件同时下载css与js文件提高网页运行效率
2 如何使用mini-css-extract-plugin插件
下载mini-css-extract-plugin本地软件包配置webpack.config.js让Webpack拥有插件功能打包后观察结果
七搭建开发环境
配置webpack-dev-server快速开发应用程序 作用启动web服务自动检测代码变化热更新到网页 注意dist目录和打包内容是在内存里
