webpack 简介

webpack 简单来说就是一个 js 打包器，将项目中的各种模块打包成资源文件。通过代码分隔把代码分离到不同的 bundle 中，用来按需加载这些文件。使用 loader 来预处理文件，允许打包 js 外的任何静态资源。

核心概念有四个：

• 入口（entry）
  
  • 表示 webpack 使用哪个模块来构建内部依赖，webpack 会找出入口文件依赖的模块和库
  • 可以配置一个或多个入口
• 出口（output）
  
  • 告诉 webpack 在哪里输出创建的 bundle，output.filename可以设置输出的 bundle 文件名称，output.path来设置 bundle 的输出路径
• 预处理（loader）
  
  • 由于 webpack 只识别 js 代码，所以需要 loader 来处理非 js 文件，如 css、image、font等，处理成 webpack 能够识别的模块然后再进行处理
  • test：用来标识被 loader 转换的某个或某类文件，一般使用正则表达式匹配
  • use：进行转换时使用的 loader，多个 loader 时，加载顺序是从右往左
• 插件（plugins）
  
  • loader 只是用来转换某些类型的模块，插件可以执行范围更广的任务，使用的时候只需要 require()一下，然后添加到 plugins 数组中，大部分插件可以通过 option 自定义配置

写了一个简单 Demo，里面有详细的注释：
Demo 地址