简单介绍一下Webpack

webpack是一个模块打包工具，可以使用它管理项目中的一些依赖，并编译输出模块所需要的静态文件。它可以很好的管理打包开发中用到的HTML,CSS,JavaScript静态文件（图片字体）的等，让开发更高效。

webpack的基本功能和工作原理

  • 代码转换
    • TypeScript编译成JavaScript、scss编译成CSS等
  • 文件优化
    • 压缩JavaScript、CSS、HTML代码，压缩合并图片等
  • 代码分割
    • 提取多个页面的公共代码，提取首屏不需要执行部分的代码让其异步加载
  • 模块合并
    • 在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
  • 自动刷新
    • 监听本地源代码的边划自动构建，刷新浏览器
  • 代码校验
    • 在代码提交到仓库之前需要检测代码是否规范，以及单元测试是否通过

  • 自动发布

    • 更新完代码后，自动构建出线上发布代码并传输给发布系统

      webpack构建过程

  • 从entry里配置的module开始递归解析entry依赖的所有module

  • 每找到一个module，就会根据配置的loader去找对应的转换规则
  • 对module进行转换后，在解析出当前module依赖的module
  • 这些模块会以entry为单位分组，一个entry和其所依赖的module被分到一个chunk
  • 最后webpack会把所有的chunk转换成文件输出

  • 在整个流程webpack会在恰当的时机执行plugin里定义的逻辑

    webpack打包原理

    将所有依赖打包成一个bundle.js，通过带啊吗分割成单元片段按需加载

    什么是webpack，与gulp有什么区别？

  • webpack是一个模块打包工具，可以递归的打包项目中的所有模块，最终生成几个打包后的文件

  • 区别：webpack支持代码分割，模块化，全局分析

    什么是entry，output？

  • entry入口，告诉webpack要使用哪个模块作为构建项目的期待你，默认为./src/index.js

  • output出口，告诉webpack在哪里输出它打包好的代码以及如何命名，默认为./dist

    什么是loader，plugins？

  • loader是用来告诉webpack如何转换某一类型的文件，并且引入到打包出的文件中。

  • plugins作用更大，可以打包优化，资源管理和注入环境变量

    什么是bundle，chunk，module？

    bundle是webpack打包出来的文件，chunk是webpack在进行模块的以来分析的时候，代码分割出来的代码块，module是开发中的单个模块

    使用过webpack里面那些loader、plugin？

  • babel-loader：将ES6+转换成ES5-

  • css-loader style-loader：解析CSS文件，能够解释@import url（）等
  • html-webpack-plugin：压缩HTML