上一篇文章我们在一个demo中见到了webpack的身影,如果从未接触过webpack的同学学完了上一篇文章可能会觉得webpack只是一个“翻译官”,但事实上webpack可不仅仅可以‘翻译’代码,事实上,webpack是一个‘打包’工具,‘打包‘才是webpack的核心任务。
打开webpack的官网:
webpack中文网
既然说到webpack是一个模块化的打包工具,那么我们就从“模块”和“打包”这两点并结合上篇文章的demo给大家讲一下什么叫“模块打包器”。
首先我们来说一下模块这个概念。其实模块这个概念非常常见,大到生活小到我们的代码中都会有模块这个概念,在代码里模块说白了就是具有特定功能的一个独立的文件或者代码块,将多个模块组织到一起就可以实现一个庞大的功能体系。上文中我们在index.js中通过import的方式引入了三个js文件,分别是header.js、content.js以及footer.js,其实每一个js文件都可以看做是一个模块,我们引入了三个js文件也就是引入了三个模块。当我们执行npx webpack ./index.js命令的时候,webpack做的就是将header.js、content.js、footer.js以及index.js打包生成最后的main.js,至于打包之后为什么多出了一个dist文件夹以及打包之后生成的js文件名为什么叫main.js这些细节我们在以后的章节都会讲到(webpack可以手动配置打包后的输出路径以及文件名)。其实在实际的项目中,我们不仅会引入js文件,css文件和图片这些静态资源文件也是一定以及肯定需要的,webpack的功能之所以强大,还在于它不仅可以打包js文件,css文件以及图片等静态资源文件它都是可以打包的,只要按照webpack的标准去进行相关的配置就可以了。说到这里打包这个概念你是不是也已经懂了呢。我们再回到webpack官网首页:
下一章:全面掌握Webpack4.0 (一)Webpack的正确安装方式(持续更新…