前端面试题 -- webpack

前言

上一篇 前端面试题-小程序

随着前端的不断发展，现代前端开发的复杂度和规模愈来愈庞大。工程化的思想催生了不少流行框架的进程，做为如今最流行的前端构建工具--webpack，不少面试、工做场景中都会出现了它的身影。因此对于如今的前端来讲，了解并可以使用webpack，不管对我的技能或者职场求职来讲，都是一种有力的提高

感兴趣的小伙伴能够点击 这里，查看完整版前端面试题

若是文章中有出现纰漏、错误之处，还请看到的小伙伴留言指正，先行谢过

如下 ↓

1. 对webpack的了解

官方文档

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，将项目看成一个总体，经过一个给定的的主文件，webpack将从这个文件开始找到你的项目的全部依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件

核心概念：

• 入口(entry)

入口起点(entry point)指示 webpack 应该使用哪一个模块，来做为构建其内部依赖图的开始

能够经过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）

module.exports = {
  entry: './path/to/my/entry/file.js'
};

• 输出(output)

output 属性告诉 webpack 在哪里输出它所建立的 bundles ，以及如何命名这些文件，默认值为 ./dist

• loader

loader 让 webpack 可以去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）

• 插件(plugins)

loader 被用于转换某些类型的模块，而插件则能够用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到从新定义环境中的变量

• 模式

经过选择 development 或 production 之中的一个，来设置 mode 参数，你能够启用相应模式下的 webpack 内置的优化

module.exports = {
  mode: 'production'
};

2. webpack，里面的webpack.config.js怎么配置

let webpack = require('webpack');

module.exports = {
    entry:'./entry.js',  //入口文件
    
    output:{
        //node.js中__dirname变量获取当前模块文件所在目录的完整绝对路径
        path:__dirname, //输出位置
        filename:'build.js' //输入文件
    },
    
    module:{  
        // 关于模块的加载相关，咱们就定义在module.loaders中
        // 这里经过正则表达式去匹配不一样后缀的文件名，而后给它们定义不一样的加载器。
        // 好比说给less文件定义串联的三个加载器（！用来定义级联关系）：
        rules:[
          {
            test:/\.css$/,      //支持正则
            loader:'style-loader!css-loader'
          }
        ]
    },
    
    //配置服务
    devServer:{
        hot:true, //启用热模块替换
        inline:true 
        //此模式支持热模块替换：热模块替换的好处是只替换更新的部分,而不是页面重载.
    },
    
    //其余解决方案配置
    resolve:{ 
        extensions:['','.js','.json','.css','.scss']  
    },
    
    //插件
    plugins:[
        new webpack.BannerPlugin('This file is create by baibai')
    ]

}

3. webpack本地开发怎么解决跨域的

• 下载 webpack-dev-server 插件
• 配置 webpack.config.js 文件

// webpack.config.js

var WebpackDevServer = require("webpack-dev-server");

module.exports = {
    ...
    
    devServer: {
        ...
        port: '8088', //设置端口号
        // 代理设置
        proxy: {
            '/api': {
                target: 'http://localhost:80/index.php', // 目标代理
                pathRewrite: {'^/api' : ''}, // 重写路径
                secure: false, // 是否接受运行在 HTTPS 上
                
            }
        }
    }
}

4. 如何配置多入口文件

配置多个入口文件

entry: {
  home: resolve(__dirname, "src/home/index.js"),
  about: resolve(__dirname, "src/about/index.js")
}

5. webpack与grunt、gulp的不一样

三者都是前端构建工具

grunt 和 gulp 是基于任务和流的。找到一个（或一类）文件，对其作一系列链式操做，更新流上的数据， 整条链式操做构成了一个任务，多个任务就构成了整个web的构建流程

webpack 是基于入口的。webpack 会自动地递归解析入口所须要加载的全部资源文件，而后用不一样的 Loader 来处理不一样的文件，用 Plugin 来扩展 webpack 功能

webpack 与前者最大的不一样就是支持代码分割，模块化（AMD,CommonJ,ES2015），全局分析

为何选择webpack

6. 有哪些常见的Loader？他们是解决什么问题的

• css-loader：加载 CSS，支持模块化、压缩、文件导入等特性
• style-loader：把 CSS 代码注入到 JavaScript 中，经过 DOM 操做去加载 CSS
• slint-loader：经过 SLint 检查 JavaScript 代码
• babel-loader：把 ES6 转换成 ES5
• file-loader：把文件输出到一个文件夹中，在代码中经过相对 URL 去引用输出的文件
• url-loader：和 file-loader 相似，可是能在文件很小的状况下以 base64 的方式把文件内容注入到代码中去

7. 有哪些常见的Plugin？他们是解决什么问题的

• define-plugin：定义环境变量
• commons-chunk-plugin：提取公共代码

8. Loader和Plugin的不一样

• loader 加载器

Webpack 将一切文件视为模块，可是 webpack 原生是只能解析 js 文件. Loader 的做用是让 webpack 拥有了加载和解析非 JavaScript 文件的能力

在 module.rules 中配置，也就是说他做为模块的解析规则而存在，类型为数组

• Plugin 插件

扩展 webpack 的功能，让 webpack 具备更多的灵活性

在 plugins 中单独配置。类型为数组，每一项是一个 plugin 的实例，参数都经过构造函数传入

9. webpack的构建流程是什么

1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数
2. 开始编译：用上一步获得的参数初始化 Compiler 对象，加载全部配置的插件，执行对象的 run 方法开始执行编译
3. 肯定入口：根据配置中的 entry 找出全部的入口文件
4. 编译模块：从入口文件出发，调用全部配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到全部入口依赖的文件都通过了本步骤的处理
5. 完成模块编译：在通过第4步使用 Loader 翻译完全部模块后，获得了每一个模块被翻译后的最终内容以及它们之间的依赖关系
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每一个 Chunk 转换成一个单独的文件加入到输出列表，这步是能够修改输出内容的最后机会
7. 输出完成：在肯定好输出内容后，根据配置肯定输出的路径和文件名，把文件内容写入到文件系统

在以上过程当中， Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，而且插件能够调用 Webpack 提供的 API 改变 Webpack 的运行结果

10. 是否写过Loader和Plugin？描述一下编写loader或plugin的思路

编写 Loader 时要遵循单一原则，每一个 Loader 只作一种"转义"工做。 每一个 Loader 的拿到的是源文件内容 （source），能够经过返回值的方式将处理后的内容输出，也能够调用 this.callback() 方法，将内容返回给 webpack 。 还能够经过 this.async() 生成一个 callback 函数，再用这个 callback` 将处理后的内容输出出去

相对于 Loader 而言，Plugin 的编写就灵活了许多。 webpack 在运行的生命周期中会广播出许多事件，Plugin 能够监听这些事件，在合适的时机经过 Webpack 提供的 API 改变输出结果

11. webpack的热更新是如何作到的？说明其原理

具体能够参考 这里

12. 如何利用webpack来优化前端性能

• 压缩代码。删除多余的代码、注释、简化代码的写法等等方式
• 利用 CDN 加速。在构建过程当中，将引用的静态资源路径修改成 CDN 上对应的路径
• 删除死代码 Tree Shaking）。将代码中永远不会走到的片断删除掉
• 优化图片，对于小图可使用 base64 的方式写入文件中
• 按照路由拆分代码，实现按需加载，提取公共代码
• 给打包出来的文件名添加哈希，实现浏览器缓存文件

13. 如何提升webpack的构建速度

参考 这里

14. 怎么配置单页应用？怎么配置多页应用

• 单页应用能够理解为 webpack 的标准模式，直接在 entry 中指定单页应用的入口便可
• 多页应用的话，可使用 webpack 的 AutoWebPlugin 来完成简单自动化的构建，可是前提是项目的目录结构必须遵照他预设的规范

15. 什么是bundle,什么是chunk，什么是module

bundle 是由 webpack 打包出来的文件， chunk 是指 webpack 在进行模块的依赖分析的时候，代码分割出来的代码块。 module是开发中的单个模块

后记

前端发展突飞猛进，只有保持不断学习的姿态，才能走的更远

但愿这些面试题能够帮助你们温故知新、查缺补漏，不断充实本身的专业技能，走的更远

最后推荐一波 GitHub前端面试题完整版，欢迎小伙伴们 star 关注

不按期更新，期待同行

以上