Entry:
入口（Entry)指示Webpack以哪个文件为入口起点开始打包
Output:
输出（output)指示Webpack打包后的资源bundle输出到哪里，以及如何命名
Loader:
Loader让Webpack能够去处理那些非JavaScript文件（webpack自身只理解JavaScript)
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！
Plugins:
插件(Plugins)可以用于执行范围更广的任务，插件的范围包括从打包优化到压缩，一直到重新定义环境中的变量等
Mode:
模式（Mode）指示Webpack使用相应模式的配置
| 选项 | 描述 | 特点 |
|---|---|---|
| development | 会将process.env.NODE_ENV的值设为development,启用NamedChunksPlugin和NamedModulesPlugin | 能让代码在本地调试运行的环境 |
| production | 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin |
能让代码优化上线运行的环境 |
运行指令
开发环境
webpack ./src/index.js -o ./build/build.js –mode=development:webpack会以./src/index.js为入口打包文件，打包后输出到./build/build.js，整体打包环境，是开发环境
生成环境
webpack ./src/index.js-o ./build/build.js –mode=production,webpack会以./src/index.js为入口打包文件，打包后输出到./build/build.js，整体打包环境，是生产环境
结论
- webpack能处理js/json资源，不能处理css/img等其他资源
- 生产环境和开发环境将ES6模块化编译成浏览器能识别的模块化
- 生产环境比开发环境多一个压缩的js代码