## 前端为什么要进行打包和构建？ 代码层面： * 体积更小（Tree-shaking、压缩、合并），加载更快 * 编译高级语言和语法（TS、ES6、模块化、scss） * 兼容性和错误检查（polyfill,postcss,eslint） 研发流程层面： * 统一、高效的开发环境 * 统一的构建流程和产出标准 * 集成公司构建规范（提测、上线） ## module chunk bundle区别 * module - 各个源码文件，webpack中一切皆模块 * chunk - 多模块合并成的 在 entry import() splitChunks 都可以定义chunk: ``` entry: { index: path.join(srcPath, 'index.js'), other: path.join(srcPath, 'other.js') }, import('./***/djdj.js').then(res=>{ console.log(res.data) }) // splitChunks 代码分割；HtmlWebpackPlugin引用 chunk ``` * bundle -最终输出文件 ## loader和plugin的区别 loader 模块转换器 （less->css） plugin 是扩展插件，如HtmlWebpackPlugin 常见的loader和plugin有哪些？ Loader: * babel-loader：把 ES6 转换成 ES5 * css-loader：加载 CSS，支持模块化、压缩、文件导入等特性 * style-loader：把 CSS 代码注入到 JavaScript 中，通过 DOM 操作去加载 CSS。 * file-loader (png|jpg|jpeg|gif )开发 * url-loader 生产 * vue-loader Plugin: * IgnorePlugin 避免引入无用模块 * HotModuleReplacementPlugin 热更新 * define-plugin：定义环境变量 * commons-chunk-plugin：提取公共代码 * uglifyjs-webpack-plugin：通过UglifyES压缩ES6代码 ## babel和webpack的区别 * babel JS新语法编译工具，只关心语法，不关心模块化 * webpack -打包构建工具，是多个Loader plugin的集合 ## webpack如何实现懒加载 ## 如何产出一个lib ## babel-polyfill babel-runtime区别 * babel-polyfill 会污染全局 * babel-runtime 不会污染全局，产出第三方lib时要用babel-runtime ## 为什么proxy不能被polyfill ## webpack优化构建速度 ## webpack优化产出代码