目录
-
✎ 主要内容
- Webpack核心概念
- Webpack的常用配置
在上一篇文章中，我们已经实现了一个基础的Webpack结构：
里面有webpack.config.js，这个文件是我们在执行Webpack指令过程中会查找的配置文件。
在上一篇文章中指明了编译的入口文件、输出路径，以及生成文件的名称。
问题：webpack.config.js到底是什么东西呢？
答：我们可以理解为是一个对象；
module.exports可以对外公布一个js文件的相应内容！！
-
✎ Webpack核心概念
- 入口
- 输出
- loader
- 插件
-
➊ 入口 / 输出
- ➣ 入口起点(entry point)指示，webpack应该使用哪个模块，来作为构建及内部依赖图的开始；
- ➣ 进入入口起点后，webpack有哪些模块和库是入口起点（直接和间接）依赖的。
- ➣ 如图所示（其入口文件是src目录下的index.js文件，查找这个文件相依赖的内容）
-
➋ Loader
- loader让webpack能够去处理那些非Java script的文件（webpack自身只理解JavaScript）。
- loader可以将所有类型的文件转换为webpack能够处理的有效模块。
- loader作用如图所示
解析：借助一些相应的loader，将es6的语法转换为es5的语法；
-
➌ Plugins（插件）
- Loader被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。
- 插件的范围，包括从打包优化和压缩一直到重新定义环境中的变量。
- 插件接口功能及其强大，可以用来处理各种各样的任务。
- 如图所示（可以提取我们所用到的css、生成html页面，从一个目录到另外一个目录的生成）
-
✎ 配置
-
◆ 入口配置
- Webpack的入口文件可以是单个也可以是多个，决定了最终打包出来是多个bundle还是一个；
- context设置基础目录绝对路径用于从配置中解析入口的起点，先去这里再去mian.js或者是a.js，resolve记得引入原生模块！！
-
◆ 出口配置
-
◆ 模块配置
module配置，主要属性有rules、test、include、exclude、use等
◆ 模块配置 resolve属性
设置模块如何被解析。webpack提供合理的默认值，但是还是可能会修改一些细节。
- 引入文件的require可以不写后缀
- 如下src/utils路径，可以设置别名为utils，可以用utils代替这样的一个路径！！
◆ 插件配置
plugins选项用于以各种方式自定义webpack构建过程。
-
◆ 开发中服务器配置
webpack-dev-server用于启动一个开发过程中小型服务器，方便开发调试；
- port 制定服务器监听端口号
- contentBase:path.join(__dirname,"dist") 指告诉服务器资源路径在哪里
- compress 是否启动服务器gzip压缩（传输过程中变小，实现过程中再解压，增加反应速度）
- publicPath 设定可访问静态资源路径
- proxy 可以作为代理服务器向口段发送请求
-
✎ 总结
module.export是对象，包含很多属性：
- entry是入口文件
- output输出路径
- module是指明用到的loader
- resolve可以不写后缀名
- plugins插件的使用和实例化
- devServer内置小型服务器
-
✎ 课程链接
51cto学习课程（webpack配置）
