webpack 基本配置
拆分配置和 merge
webpack 配置一般拆分成3个文件：<br><ul><li>webpack.common.js 用于公共的配置；</li><li>webpack.dev.js 用于开发环境的配置；</li><li>webpack.prod.js 用于生产环境的配置。</li></ul>
引入 webpack-merge，开发环境和生产环境要 merge 上公共配置
启动本地服务
配置项 devServer，安装 webpack-dev-server
devServer.proxy 设置代理，实现跨域
处理 ES6
在 common 里面通过 babel-loader 处理
.babelrc 文件：@babel/preset-env babel 配置的集合
处理样式
common
style-loader 将 css 插入到页面中<br>css-loader 解析 css <br>post-loader 处理浏览器兼容性<br>less-loader 解析 less<br>
loader 的执行顺序是从后往前
postcss-loader 需要加 postcss.config.js 文件，配置 autoprefixer
处理图片
prod
url-loader
比较小的图片以 base64 格式产出到 html，减少 http 请求
contentHash<br>
打包代码时，加上 hash（hash 根据文件内容生成，文件内容变 -> hash 变 -> 请求时缓存失效）
相关面试题
前端代码为何要进行构建和打包？
代码层面
<ul><li>体积更小（Tree-Shaking、压缩、合并），加载更快</li><li>编译高级语言或语法（TS、ES6+、模块化、scss）</li><li>兼容性和错误检查（polyfill、postcss、eslint）</li></ul>
研发流程层面
<ul><li>统一、高效的开发环境<br></li><li>统一的构建流程和产出标准<br></li><li>集成公司规范（提测、上线等）</li></ul>
module chunk bundle 分别是什么意思，有何区别？
module：各个源码文件，webpack 中一切皆模块<br>chunk：多模块合成的，如 entry import() splitChunk<br>bundle：最终的输出文件
loder 和 plugin 的区别？
loader：模块转换器，如 less -> css<br>plugin：扩展插件，如 HtmlWebpackPlugin
常见的 loader 和 plugin 有哪些？
loaders<br>
plugins
babel 和 webpack 的区别
babel：JS 新语法编译工具，不关注模块化<br>webpack：打包构建工具，是多个 loader plugin 的集合
如何产出一个 lib?
output.library
babel-polyfill 和 babel-runtime 的区别
babel-polyfill 会污染全局<br>babel-runtime 不会污染全局（产出第三方 lib 用 babel-runtime）
webpack 如何实现懒加载？
<ul><li><span style="font-size: inherit;">import()</span></li><li><span style="font-size: inherit;">结合 Vue/React 异步组件</span></li><li>结合 vue-router/react-router 异步加载路由</li></ul>
为何 Proxy 不能被 Polyfill?
<span style="font-size: inherit;">Class 可以用 function 模拟</span><br><span style="font-size: inherit;">Promise 可以用 callback 模拟</span><br><span style="font-size: inherit;">Proxy 的功能用 Object.defineProperty 无法模拟</span><br>
webpack 常见性能优化
优化构建速度
可用于生产环境
<ul><li>优化 babel-loader<br></li><li>IgnorePlugin<br></li><li>noParse<br></li><li>happyPack<br></li><li>ParallelUglifyPlugin</li></ul>
不可用于生成环境
<ul><li>自动刷新</li><li>热更新</li><li>DllPlugin</li></ul>
优化产出代码
<ul><li><span style="font-size: inherit;">小图片 base64 编码</span></li><li><span style="font-size: inherit;">bundle 加 hash</span></li><li><span style="font-size: inherit;">懒加载</span></li><li><span style="font-size: inherit;">提取公共代码</span></li><li>使用 CDN 加速<br></li><li>IgnorePlugin<br></li><li>使用 production</li><li>Scope Hosting</li></ul>
