webpack的基本使用

最近又重新复习整理了一些关于webpack的基本使用，和大家分享一下

一、webpack简介

webpack是前端资源构建工具+静态模块打包器。
前端资源构建工具：就是把一些浏览器不支持的文件比如less，sass，转换成浏览器支持的css这样的工具。
静态模块打包器： 前端的所有资源文件(js/json/css/img/less/…)都会被webpack作为模块处理。 它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。

二、webpack五个核心概念

2.1 Entry

指定 webpack 打包的入口

2.2 Output

指定 webpack 打包资源的存放位置

2.3 Loader

让 webpack 能够处理非 JavaScript 文件 (webpack 自身只能处理JavaScript)

2.4 Plugins

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

2.5 mode

指定 webpack 当前的构建环境类型。设置mode可以自动触发webpack内置的函数，达到优化的效果。

development

会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

development打包后，一些没有依赖的方法 变量 文件会保留，production则会移除。

production

会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。

production打包后，代码会进行压缩，比development的文件小。

三、webpack的基本使用

这是我搜集到的一些webpack的一些基本命令，后续有时间会详细更新具体内容