响应式html5网页模板seo网站推广价格
一：什么是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目录和打包内容是在内存里