webpack 核心概念

核心概念

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 模块