核心概念
Entry - 打包的入口
Output - 打包的输出
Loaders - webpack 处理js 之外的东西,就是使用的Loaders
Plugins - webpack 其它功能 比如压缩代码、代码分割 等就是通过Plugins 来完成的
Entry
代码的入口(某段代码的入口,这个入口会说明这段代码所有的依赖 import 了或者require 了哪些东西)
打包的入口
可以单个或多个(多页面应用程序; 或者单页面应用程序将业务代码放一个entry,框架代码放另一个entry)
entry 的使用方法,有下面三种,比较推荐第三种。
Output
是对打包成的文件(bundle)的描述
可以是一个或多个
自定义规则(多个值时)
配合CDN
配置如下。第二例,有两个entry, 所有output 中【name】就是entry 中的key 名,【hash】是webpack 打包过程中的标识码。
Loaders
在webpack 中处理除了 js 外的其它文件,就是使用 Loaders.
Loaders 主要是处理文件的功能,它将文件转化为模块
下面的例子,就是将一个css 文件转化为一个模块,这样js 就可以引入它。匪夷所思的场景...
常用 Loader
编译相关
babel-loader, ts-loader
样式相关
style-loader, css-loader, less-loader, postcss-loader
文件相关
file-loader, url-loader
Plugins
Plugins 可以参与打包整个过程,主要功能是打包优化和压缩、配置编译时变量等等。
常用 Plugins
优化相关
CommonsChunkPlugin
UglifyjsWebpackPlugin
功能相关
ExtractTextWebpackPlugin
HtmlWebpackPlugin
HotModuleReplacementPlugin
CopyWebpackPlugin
名词
Chunk 代码块,打包过程会把代码分成一个一个chunk 代码块
Bundle 打包后的东东
Module 模块