## 前端為什么要進行打包和構建？ 代碼層面： * 體積更小（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優化產出代碼