webpack基本介绍

1. 谈谈你对webpack的看法

1. 它是一个模块化的打包工具，主要是来管理项目中的模块依赖，并编译输出所需的静态文件
2. 它可以很好的管理打包开发中所用到的Html,CSS，JavaScript等（图片，视频）等静态资源
3. 对于不同类型的依赖，webpcak有对应模块加载器，会分析模块间的依赖关系，并且生成优化后的静态资源

   2. webpack的功能

• 代码转换
• 文件优化
• 代码分割
• 模块合并
• 自动刷新
• 自动校验
• 自动发布

  3. webpack构建过程

1. webpack从entry中的配置的module,依次递归解析entry中的mudule
2. 每找到一个module，会根据loader配置找相应的转换规则模式
3. 对模块module转换后，在解析出当前module中依赖的module
4. 这些模块回以entry为单位，将entry和其所依赖的使用module全都合并到某个组chunk中
5. webpack会将所有的chunk转换文件输出在整个流程中，webpack会在适当的时机执行plugin中的逻辑

   4. 常见的loader

• file-loader,eslint-loader,vue-loader,json-loader
• css-loader,style-loader,less-loader,sass-loader
• babel-loader,ts-loader
• url-loader

  5. 常见的plugin

1. html-webpack-plugin：根据模板页面生成打包的 html 页面
2. uglifyjs-webpack-plugin：不支持 ES6 压缩 ( Webpack4 以前)
3. mini-css-extract-plugin: 分离样式文件，CSS 提取为独立文件，支持按需加载
4. clean-webpack-plugin: 目录清理
5. copy-webpack-plugin: 拷贝文件
6. webpack-bundle-analyzer: 可视化 Webpack 输出文件的体积 (业务组件、依赖第三方模块)

   6. Loader和plugin的区别

   ```javascript
7. Loader是一个本身就是一个函数,在函数中接受到的内容进行转换并且返回转换的结果，因为webpack值认识javascript,所以loader就承担了翻译官的任务，将其他的类型的语言进行转译的预处理工作
8. Loader在module.rules中进行配置，并且它的数据类型为数组，它的每一项都是Object，包括text,option,loader属性 javascript
9. Plugin是一个插件，它的数据类型为数组，它在plugins中单独配置，每一项都是Plugin的实例，参数都通过构造函数来传入
10. 它是基于数据流Tapable,插件可以扩展webpack的功能，在webpack运行后在生命周期中会出现许多的事件，Plugin可以监听这些事件，然后在合适的时机通过调用webpack中的API来改变输出的结果

    <a name="G1keV"></a>
    ## 7. 说一下webpack的热更新原理
    ```javascript
    1.webpack热更新原理 （Hot Module Replacement）简称HMR,就是不需要刷新浏览器将更新的内容替换到旧的页面中
    2.HMR核心就是客户端从服务端拉取更新文件