Abo

webpack入门及其使用

又是面试必问系列,重新整理一波(汗)

博主曾经整理过webpack的入门文章,但这次经历过面试的洗礼后,打算来重新入门一次☑

这里先附上年前尚还浅显的webpack入门介绍文……

面试官:为什么使用webpack

前方高度口语化💀

我当时使用 webpack 的一个最主要原因是为了简化页面依赖的管理,并且通过将其打包为一个文件来降低页面加载时请求的资源数。我认为 webpack主要原理是,它将所有的资源都看成是一个模块,并且把页面逻辑当作一个整体,通过一个给定的入口文件webpack 从这个文件开始,找到所有的依赖文件,将各个依赖文件模块通过 loaderplugins 处理后,然后打包在一起,最后输出一个浏览器可识别的js文件。

Webpack 有四个核心概念,分别是 Entry(入口)、OutputloaderPlugins (插件)。

Entry 是 webpack 的入口,它指示 webpack 应该从哪个模块开始着手,来作为其构建内部依赖图的开始。

Output 属性告诉 webpack 在哪里输出打包文件,可指定打包文件的名称,默认位置为 ./dist。

loader 可以理解为 webpack 的编译器,它使得 webpack 可以处理一些非 JavaScript 文件。在对 loader 进行配置的时候,test 属性,标志有哪些后缀的文件应该被处理,是一个正则表达式。use 属性,指定 test 类型的文件应该使用哪个 loader 进行预处理。常用的 loader 有 css-loader、style-loader 等。

Plugin插件可以用于执行范围更广的任务,包括打包、优化、压缩、搭建服务器等等,要使用一个插件,一般是使用 npm 包管理器进行安装,然后在配置文件中引入,最后将其实例化后传递给 plugins 数组属性。使用 webpack 的确能够提供我们对于项目的管理,但是它的缺点就是调试和配置起来太麻烦了。

但现在 webpack4.0 的免配置一定程度上解决了这个问题。但是我感觉就是对我来说,就是一个黑盒,很多时候出现了问题,没有办法很好的定位。

什么是webpack

Webpack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

##