1.webpack学习

1.1 webpack简介

webpack：将所有存在依赖关系的文件（.html .css .js .jpg...）简称代码块，打包生成静态文件资源的工具。

1.2 webpack五个核心概念

1.2.1 Entry

入口（Entry）指示 Webpack以哪个文件为入口起点开始打包，分析构建内部依赖图。

1.2.2 Output

输出（Output）指示Webpack打包后的资源bundles输出到哪里去，以及如何命名。

1.2.3 Loader

Loader让Webpack能够去处理那些非Js文件（Webpack本身知理解Js）。

1.2.4 Plugins

插件（Plugins）可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境变量。

1.2.5 Mode

模式（Mode）指示 Webpack使用相应模式的配置。

选项	描述	特点
development（开发环境）	会将process.NODE_ENV的值设置为development。启用NamedChunksPligin 和 NamedModulesPlugins。	能让代码本地调试运行环境
production（生产环境）	会将DefinePlugin 中process.env.NODE_ENV 的值设置为production。启用FlagDependencyUsagePlugin,FlagIncludedChunksPlugin, ModuleConcatenationPlugin,NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,SideEffectsFlagPlugin 和TerserPlugin	能让代码优化上线运行环境

webpack学习笔记源码