一、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一起判断
三、例子