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

猜你喜欢

转载自blog.csdn.net/purple_lumpy/article/details/84993900