- webpack3和webpack4的区别？
- mode/–mode参数: 新增了mode/--mode参数来表示是开发还是生产（development/production）; production 侧重于打包后的文件大小，development侧重于构建速度
- 移除loaders，必须使用rules（在3版本的时候loaders和rules 是共存的但是到4的时候只允许使用rules）
- 移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
- 支持es6的方式导入JSON文件，并且可以过滤无用的代码
- 什么是webpack，和grunt和gulp有什么不同？
- Webpack是一个模块打包器，他可以递归的打包项目中的所有模块，最终生成几个打包后的文件。
- 他和其他的工具最大的不同在于他支持code-splitting、模块化(AMD，ESM，CommonJs)、全局分析。
- 什么是bundle,什么是chunk，什么是module?
- bundle是由webpack打包出来的文件
- chunk是指webpack在进行模块的依赖分析的时候，代码分割出来的代码块
- module是开发中的单个模块。
- 什么是Loader?什么是Plugin?
- loader是使wenbpack拥有加载和解析非js文件的能力
- plugin 可以扩展webpack的功能，使得webpack更加灵活。可以在构建的过程中通过webpack的api改变输出的结果
- Webpack的构建流程？
- 初始化参数，从配置文件和shell语句中读到的参数合并，得到最后的参数
- 开始编译：用合并得到的参数初始化complier对象，加载是所有配置的插件，执行run方法开始编译
- 确定入口，通过entry找到入口文件
- 编译模块，从入口文件出发，调用所有配置的loader对模块进行解析翻译，在找到该模块依赖的模块进行处理
- 完成模块编译，得到每个模块被翻译之后的最终的内容和依赖关系
- 输出资源，根据入口和模块之间的依赖关系，组装成一个个包含多个模块的chunk，在把每个chunk转换成一个单独的文件加载到输出列表
- 输出完成，确定输出的路径和文件名，把内容写到文件系统中
- 如何利用webpack来优化前端性能
- 提取公共代码。webpack4移除了CommonsChunkPlugin (提取公共代码)，用optimization.splitChunks和optimization.runtimeChunk来代替
- 压缩代码。（development和production）
- 使用loader的时候，使用exclude排除node_modules中的文件
- 配置extractTextWebpackPlugin插件
- 使用TreeShaking插件：Tree-shaking 概念最早由Rollup.js 提出，后来在webpack2中被引入进来，但是这个这一特性能够被支持得益于ES6 modules的静态特性。ES6的模块声明相比于传统CommonJS的同步require有着本质区别。这种modules设计保证了依赖关系是提前确定的，使得静态分析成为了可能，与运行时无关。（除那些引用的但却没有使用的代码）
// 一、.babelrc 中添加
"presets": [
[
"es2015", {
"modules": false,
}
],
"stage-2"
],
// 或者在babel loader中的options里面添加同样的代码, modules:false 表示的是不对ES6进行处理
// 二、使用uglifyjs-webpack-plugin
plugins: [
new UglifyJsPlugin(),
...
]
Copy
Note
想要代码配置tree-shaking,必须采用es6的模块语法，因为es6的模块采用的是静态分析，也就是从字面量对代码进行分析。之前的require是动态分析，必须代码执行到才知道引用的什么模块。
- 如何可以自动生成webpack配置？
答案： webpack-cli /vue-cli /etc ...脚手架工具 - webpack-dev-server和http服务器如nginx有什么区别?
- webpack-dev-server使用内存来存储webpack开发环境下的打包文件
- 并且可以使用模块热更新
- 他比传统的http服务对开发更加简单高效。
- 什么是模块热更新？
答案:模块热更新是webpack的一个功能，他可以使得代码修改过后不用刷新浏览器就可以更新，是高级版的自动刷新浏览器。 - 什么是长缓存？在webpack中如何做到长缓存优化？
答案： - 浏览器在用户访问页面的时候，为了加快加载速度，会对用户访问的静态资源进行存储，但是每一次代码升级或是更新，都需要浏览器去下载新的代码，最方便和简单的更新方式就是引入新的文件名称。
- 在webpack中可以在output纵输出的文件指定chunkhash,并且分离经常更新的代码和框架代码。
- 通过NameModulesPlugin或是HashedModuleIdsPlugin使再次打包文件名不变。
- 什么是Tree-shaking?CSS可以Tree-shaking吗？
答案： - Tree-shaking是指在打包中去除那些引入了，但是在代码中没有被用到的那些死代码。
- 在webpack中Tree-shaking是通过uglifySPlugin来Tree-shaking JS
- Css需要使用Purify-CSS。
