1.webpack 配置
2.webpack 总结、面试题

webpack 配置

       Webpack 配置详解

       在项目初期，首先要生成 package.json 文件，作为项目描述，通过命令行初始化项目来创建：`npm init`。

       开发和生产环境是任务提交平台源码前端项目常见的构建环境，webpack 提供 mode 属性来区分。通过 process.env 控制环境变量，如使用 cross-env 插件方便设置启动命令。

       配置文件根据环境不同，分为 webpack.base.config.js（公共配置）和 webpack.dev.config.js、webpack.prod.config.js（环境特定配置），通过 webpack-merge 合并。

       入口和出口配置是webpack的基本组成部分，分别通过 entry 和 output 属性指定处理的epower源码起点和结果文件位置。

       loader 和 plugin 分别用于处理不同类型文件和额外功能，如处理HTML、CSS和SASS等，需要下载相应的插件。

       HTML配置涉及插件的安装和配置，SASS配置包括下载依赖和配置loader处理.scss文件。

       遇到下载问题时，可能需要重新管理node-sass依赖，并使用copy-webpack-plugin复制不需要处理的静态文件。

       source map配置在开发环境中开启，有助于定位源代码错误；服务器代理用于开发环境调试接口；忽略文件配置则避免webpack无谓地处理某些目录。

       为了提升性能，可以使用HappyPack进行多进程打包，ParallelUglifyPlugin则用于多进程压缩JS。samcopyer源码

webpack 总结、面试题

       webpack 是一种模块打包工具，用于将各类资源如 img、CSS、JS 等转译组合为 JS 格式的 bundle 文件，实现资源的模块化打包。

       使用 webpack 的好处在于，它能将多种静态资源如 js、css、less 转换成单一静态文件，减少页面请求次数，同时提供语法转换功能，如 less 编译成 css, ES6 转换成 ES5，确保语法兼容性，textnow源码并且支持多种功能强大的插件。

       在 webpage 之前，前端打包主要依赖于引入外部第三方库，而浏览器不支持模块化，因此需要使用如 browserify、requirejs 等打包工具来实现模块化。

       浏览器不直接支持模块化，早期通过 browserify、requirejs 等工具将能在浏览器中运行的 commonjs 模块代码进行打包。

       让浏览器支持模块化，主要是通过引入 es6 模块化，它能实现更高效、更简洁的代码组织方式。

       跨域请求安全问题可以通过设置 CORS 或者使用代理服务器来解决，superspineboy源码确保资源请求的安全性。

       webpack 插件如 HtmlWebpackPlugin、mini-css-extract-plugin、clean-webpack-plugin 等，能提供更强大的功能，如处理 HTML 资源、自动引入打包输出的所有资源、清除旧版本文件等。

       webpack 实时重新加载功能可以通过 watch mode 实现，它能自动打包修改后的 js 文件，无需手动操作。webpack-dev-server 插件则提供了一个带有实时重新加载功能的 web server。

       webpack 的构建流程包括读取配置、初始化参数、开始编译、确定入口、编译模块、完成模块编译、输出资源、输出完成等步骤，涉及核心概念如入口文件、Loader、Chunk 等。

       优化前端性能可以通过压缩代码、提取公共代码、代码分割、使用 Tree Shaking 技术等方法，提高代码加载和执行效率。

       使用 webpack 配置单页应用时，只需指定入口文件即可，而多页应用需遵循特定的目录结构，并使用 AutoWebPlugin 来完成自动化构建，确保公共代码的高效加载。

       loader 是 webpack 处理非 JS 类型文件的关键组件，通过配置模块规则，告诉 webpack 使用特定 loader 进行文件转换。常见的 loader 包括 less-loader、css-loader 等。

       webpack 中的 tree-shaking 是一种优化技术，用于移除无用代码，提高构建速度和运行效率，确保代码精简高效。

       webpack 与 grunt、gulp 的不同在于，它基于入口文件进行递归解析，使用 Loader 和 Plugin 扩展功能，而 grunt 和 gulp 则是基于任务和流的构建模式。

       bundle 是由 webpack 打包的最终文件，chunk 是由多个模块组成的代码块，用于合并和分割资源。bundle、chunk 和 module 是 webpack 世界中的核心概念。

       Webpack Proxy 通过 http-proxy-middleware 实现跨域请求的代理，确保开发阶段浏览器访问后端服务时不触发同源策略限制。

       为了提高 webpack 构件速度，可以使用 CommonsChunkPlugin 提取公共代码、设置 externals 配置、使用 DllPlugin 和 DllReferencePlugin 预编译资源模块、利用 Happypack 实现多线程加速编译、使用 webpack-uglify-paralle 提升 uglifyPlugin 压缩速度、应用 Tree-shaking 和 Scope Hoisting 技术剔除多余代码。

       Npm 打包时需要注意模块仓库的正确使用、权限管理、版本控制等，确保代码质量并充分利用 webpack 提供的优化功能。

       前端进行打包和构建的主要目的是优化代码性能，减少加载时间，提升用户体验，简化代码维护和部署流程。

       sourceMap 是 webpack 生成的映射关系，用于在发生错误时快速定位源代码位置，配置方式如 devtool：‘source-map’。使用不同前缀如 cheap-module-eval-source-map、cheap-mudole-source-map 可以针对开发或线上环境优化性能。

       webpack 的基本功能包括代码转换、文件优化、代码分割、模块合并、自动刷新、代码校验和自动发布，提供了一站式前端构建解决方案。