风尚学Webpack-入门篇（3）_风尚云网-CSDN博客
图片来自webpack官网logo
本博目录
多入口打包https://juejin.im/post/5a534cb9f265da3e4674ebeb
webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全.
npm run build / serve 之后发生了什么？
module、chunk、bundle 的区别，答案如下所示：
babel-polyfill 和 babel-runtime 的区别，答案如下所示：
对于 webpack 优化构建速度，可用于生产环境的，答案如下所示：
对于 webpack 优化构建速度，不用于生产环境的，答案如下所示：
gulp/grunt 与 webpack的区别是什么?
grunt 与 gulp
Grunt和Gulp属于一类的都是构建工具，只是Grunt是根据配置来的，Gulp是采用代码优于配置的原则，Gulp的性能要比Grunt的性能要高，它们可以执行指定的任务。
webpack的特点：
Webpack 是目前最热门的前端资源模块化管理和打包工具。
把一切都视为模块：不管是 CSS、JS、Image 还是 HTML 都可以互相引用，通过定义 entry.js，对所有依赖的文件进行跟踪，将各个模块通过 loader 和 plugins 处理，然后打包在一起。
按需加载：打包过程中 Webpack 通过 Code Splitting 功能将文件分为多个 chunks，还可以将重复的部分单独提取出来作为 commonChunk，从而实现按需加载。
webpack是解决什么问题而生的?
require everything, bundle everything.
如何配置多入口文件?webpack多入口文件页面打包配置:
多入口打包
https://juejin.im/post/5a534cb9f265da3e4674ebeb
你是如何提高webpack构件速度的?
性能优化篇---Webpack构建速度优化https://segmentfault.com/a/1190000018493260
webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全.
Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：
初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
确定入口：根据配置中的 entry 找出所有的入口文件；
编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。
在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。
详解：https://juejin.im/entry/5b0e3eba5188251534379615https://juejin.im/entry/5b0e3eba5188251534379615
webpack的核心概念
Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
Plugin：扩展插件，在 Webpack 构建流程中的特定时机会广播出对应的事件，插件可以监听这些事件的发生，在特定时机做对应的事情。
介绍下loader/plugin
loader
webpack允许我们使用loader来处理文件，loader是一个导出为function的node模块。可以将匹配到的文件进行一次转换，同时loader可以链式传递。
plugin
webpack的plugin比loader强大，通过钩子可以涉及整个构建流程，可以做一些在构建范围内的事情。
npm run build / serve 之后发生了什么？
脚手架使用webpack来执行配置文件，默认是webpack.config.js或者vue.config.js。然后执行入口文件的js,进行解析处理。
如果是build则生成物理文件存在磁盘上。如果是server的话则将编译的结果存入内存条中。
webpack是干嘛的？定义？解释？
webpack是一个打包工具，前端半自动化开发工具。它是基于nodejs运行的，它的功能有：压缩代码，压缩图片，解析es6,解析sass语法，代码热更新等。
webpack构成部分？
入口，出口，插件，装载机loader，本地服务devServer
webpack执行过程？
webpack默认执行webpack.config.js文件，读取入口文件开始解析各种资源。
列举几个常用loader？
sass-loader 解析sass文件，转成css,
file-loader 处理字体，图片,
url-loader 基于file-loader处理文件,
css-loader 解析css文件，处理css代码,
style-loader把css代码插入到页面当中,
img-loader专门处理图片的，
babel-loader解析es6转成es5
loader的执行顺序？
答：自下而上，从右向左
plugins有哪些？
html-webpack-plugins解析html的
loader和插件plugins的区别？
答：正常情况下，先用loader把资源处理完之后再执行插件。
loader是专门用于处理各种资源的，编译过程。
plugins是对webpack没有的功能的补充
【webpack默认只能解析js文件】
webpack安装
npm i webpack webpack-cli
webpack-dev-server
创建一个webpack.config.js文件进行配置
webpack执行的命令
零配置打包：npx webpack
只能打包js文件，打包后的文件一定叫main.js
执行配置：webpack
启动服务：webpack serve
前端为何要进行打包和构建，答案如下所示：
体积更小，Tree-shaking、压缩和合并，加载更快
编译高级语言或语法，TS、ES6+、模块化、scss
兼容性和错误检查，Polyfill、postcss、eslint
统一、高效的开发环境
统一的构建流程和产出标准
集成公司构建规范，提测、上线等
module、chunk、bundle 的区别，答案如下所示：
module 是各个源码文件，webpack 中一切皆模块
chunk 是多模块合并成的，如 entery、import()、splitChunk 等等
bundle 是最终输出的文件
loader 和 plugin 的区别，答案如下所示：
loader 模块转换器，如 less -> css
plugin 扩展插件，如 HtmlWebpackPlugin
babel 和 webpack 的区别，答案如下所示：
babel 是 JS 新语法编译工具，不关心模块化
webpack 是打包构建工具，是多个 loader、plugin 的集合
如何产出一个 lib，答案如下所示：
参考 webpack.dll.js
output.library
lib 的文件名，输出 lib 到 dist 目录下，lib 的全局变量名
babel-polyfill 和 babel-runtime 的区别，答案如下所示：
babel-polyfill 会污染全局
babel-runtime 不会污染全局
产出第三方 lib 要用 babel-runtime
webpack 如何实现懒加载，答案如下所示：
import()
结合 Vue、React 异步组件
结合 Vue-router、React-router 异步加载路由
为何 Proxy 不能被 Polyfill，答案如下所示：
如 Class 可以用 function 模拟
如 Promise 可以用 callback 来模拟
但 Proxy 的功能用 Object.defineProperty 无法模拟
对于 webpack 优化构建速度，可用于生产环境的，答案如下所示：
优化 babel-loader
IgnorePlugin
noParse
happyPack
ParallelUglifyPlugin
对于 webpack 优化构建速度，不用于生产环境的，答案如下所示：
自动刷新
热更新
DllPlugin
对于 webpack 优化产出代码，答案如下所示：
小图片 base64 编码
undle 加 hash
懒加载
提取公共代码
使用 CDN 加速
IgnorePlugin
使用 production
Scope Hosting
webpack的热更新是如何做到的？说明其原理？
webpack的热更新又称热替换（Hot Module Replacement），缩写为HMR。 这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧的模块。
怎么配置单页应用？怎么配置多页应用？
单页应用可以理解为webpack的标准模式，直接在entry中指定单页应用的入口即可，这里不再赘述
多页应用的话，可以使用webpack的 AutoWebPlugin来完成简单自动化的构建，但是前提是项目的目录结构必须遵守他预设的规范。 多页应用中要注意的是：
每个页面都有公共的代码，可以将这些代码抽离出来，避免重复的加载。比如，每个页面都引用了同一套css样式表
随着业务的不断扩展，页面可能会不断的追加，所以一定要让入口的配置足够灵活，避免每次添加新页面还需要修改构建配置
更多前端面试题及资料搜：尽在风尚云网
风尚云网风尚云网提供了编程的基础技术游戏, HTML、CSS、Javascript等各种小游戏，也提供了强大的在线搜索功能，实用，有趣
http://www.fengshangyunwang.cn/
8303
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
