基础学习

1. webpack 用途

  1. 项目工程化后，前端代码分布到各个模块中，webpack 分析打包模块
  2. 通过各种loader（插件） 以及自定义loader可处理各种类型文件

2. 配置

  1. webpack运行环境为 nodejs 所以使用commonjs语法，导出内容为一个对象

  2. context 配置公共目录

  3. target 输出模式

    1. node
    2. web 默认模式

  4. 文件加载入口 entry

    1. 单文件入口 entry 直接指定文件
    2. 多入口 entry 为对象文件
      1. 对象内指定任意内容
      2. key为出口配置 [name]
      3. value 为入口文件路径
      4. vendor array对象 抽离列表

  5. 文件输出出口 output

    1. path 配置输出文件路径
    2. filename 配置输出文件名称
    3. publicPath 配置公共文件夹，处理公共文件输出位置（静态图片字体等）
    4. library 导出文件名称
    5. libraryTarget 输出模式 amd commonjs

  6. mode

    1. 配置模式
      1. development
      2. production

  7. resolve

    1. alias 配置别名可在页面中直接使用别名
    2. extensions 配置扩展名列表可再引入时不写扩展名
    3. modules 模块查找目录

  8. devtool

  9. module

  10. noParse 不解析依赖库提高打包性能

  11. rules

    1. test 配置匹配文件正则表达式
    2. exclude 排除文件正则表达式 提高性能
    3. use 则 loader 配置loader 从又向左解析
      1. array对象
      2. 字符串或则对象
        1. 对象
          1. loader 字符串
          2. options 配置 属性

  12. plugins 配置插件 array对象

  13. 内容为各个插件实例列表

  14. devserver 服务器配置

    1. contentBase 默认根目录文件夹
    2. historyApiFallback
    3. overlay 覆盖错误配置
    4. stats: “errors-only”
    5. host
    6. port
    7. compress
    8. hot
    9. inline