webpack

Posted 2020-11-30 RestfulCoding

一、webpack是用来打包JavaScript。在应用程序中使用webpack时，它会递归的构建一个依赖关系图，其中包含应用程序的每个模块，然后将所有的模块打包成一个或者多个bundle。

二、配置项

　　1. 入口entry(entry的值可以是字符串，字符串数组或者对象)

　　webpack从入口的文件开始构建依赖关系图。当entry的值是字符串时，跟entry的值为{main: ‘文件地址‘}的作用是一样的。当entry的值是对象，且对象有多个属性的时候，将构建多个依赖关系图。

　　2. 输出output(output的值为一个对象，包括属性filename跟path。当有多个入口起点的时候，filename可以使用占位符[name])

　　webpack打包后的文件名称跟放置路径就是这里设置的。

　　3. 模式mode(值可以是development，production)

　　模式的值不同，process.env.NODE_ENV的值也不一样，启用的插件也不一样

　　4. loader(用于将模块的源代码进行转换，test跟use属性用来配置哪些文件使用什么loader来转换文件)

　　loader可以在你import或者加载模块时预处理文件。webpack本身只打包js。loader可以将不同的文件比如css解析成js.

　　5. 插件plugins(用了解决loader实现的其他事，是一个具有apply属性的js对象。apply会被webpack的compile调用)

　　6. webpack解析import中的文件路径时，可以使用resolve中alias属性的值来替换路径。如果文件路径没有扩展名，则使用resolve中的extensions作为文件的扩展名。

　　7. webpack解析import中的文件路径时，如果路径指向一个文件夹。根据package.json、resolve.mainFiles、resolve.extensions一起判断

三、例子