webpack学习1

1.webpack 是什么

a. 是一种前端资源构建工具，一个静态模块打包器(module bundler)。
b. 在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。
c. webpack 根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

2.最基础的使用

在项目中安装webpack：

npm i webpack webpack-cli -D

然后便可以在根目录下执行 webpack 命令进行打包了，需要注意的是：
a. 需要指定入口文件和输出文件，如 webpack ./src/index.js -o ./build/built.js --mode=development 表示入口文件为src目录下的index.js，输出文件为build目录下built.js，并且打包环境是开发环境
b. 生产环境打包，将 mode 设置为 production 即可，生产环境下打包
c. webpack仅能处理js/json资源，不能处理css/img等其他资源（需要加载对应的 Loader 和 Plugins），能够处理一些基础的ES6语法，对于复杂的如Promise等也不能处理

3.五个核心概念

一般来说，需要进行webpack相关配置而不是直接用命令指定，配置文件的名称为 webpack.config.js（规定如此，且路径需在根目录下），以下是五个核心的概念：
a. entry
入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
b. output
输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
c. loader
Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件，如加载 cssLoader以处理 css 文件。
d. plugins
插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。
e. mode
模式(Mode)指示 webpack 使用相应模式的配置。

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