webpack工作方式

webpack就是一个现代javascript应用程序的模块打包器,为什么称作模块打包器呢,是因为webpack会将css js image等文件当成模块来进行打包

webpack如何工作呢?

当webpack处理应用程序的时候,首先会找到一个入口文件,然后通过入口文件开始递归的生成 一个关系依赖图,即dependency graph,这个关系依赖图中包含了应用程序需要的所有模块,最后将所有模块打包成少量的 bundler,浏览器进行加载

程序中需要做什么呢?

首先我们需要一个webpack.config.js文件,该文件有一个entry属性,webpack就会把该属性的value作为入口文件,然后递归的生成关系依赖图,那么webpack中 这些模块之间是如何体现关系依赖的呢? 其实有多种方式,例如commonjs的requrie语句,es2015的import语句,甚至 url等,构建完关系依赖图,然后对关系依赖图中模块进行打包,那么打包之后位置以及文件叫什么?这个体现在webpack.config.js 中的output属性,在该属性下可以指定打包位置,以及打包文件名称,这样整体的webpack打包流程就呈现出来了(加粗区域是我们需要做的)

还需要注意的一件事是,webpack只识别js作为模块,其他文件如何转化成模块,这时候就用到了loader,例如css可以用 css-loader,style-loader等,这涉及到了具体的应用细节

WebFrontAuto
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。