webpack中的 loaders, plugins, mode

冷不防 2023-07-21 15:27 8阅读 0赞

本文主要介绍webpack中的loaders, plugins, mode。

### 1. loaders    ###

webpack原生只支持js和json类型，但可以通过loaders支持其它文件类型。

常见的loader总结：

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>babel-loader</td> 
   <td>转换ES6, ES7等js新特性语法</td> 
  </tr> 
  <tr> 
   <td>css-loader</td> 
   <td>支持.css文件的加载和解析</td> 
  </tr> 
  <tr> 
   <td>less-loader</td> 
   <td>将less文件转换成css</td> 
  </tr> 
  <tr> 
   <td>ts-loader</td> 
   <td>将ts转换成js</td> 
  </tr> 
  <tr> 
   <td>file-loader</td> 
   <td>图片、字体等的打包</td> 
  </tr> 
  <tr> 
   <td>raw-loader</td> 
   <td>将文件以字符串的形式导入</td> 
  </tr> 
  <tr> 
   <td>thread-loader</td> 
   <td>多进程打包js和css</td> 
  </tr> 
 </tbody> 
</table>

### 2. plugins    ###

plugins作用于整个构建过程，用于文件的优化，资源管理和环境变量的注入等。

常见的plugins总结：

<table style="width:500px;"> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td> <p>CommonsChunkPlugin</p> </td> 
   <td>将chunks相同的模块代码提取成公共js</td> 
  </tr> 
  <tr> 
   <td>CleanWebpackPlugin</td> 
   <td>清理构建目录</td> 
  </tr> 
  <tr> 
   <td>ExtractTextWebpackPlugin</td> 
   <td>将css从bundle文件中提取成一个独立的css文件</td> 
  </tr> 
  <tr> 
   <td>CopyWebpackPlugin</td> 
   <td>将文件或者文件夹拷贝到输出目录</td> 
  </tr> 
  <tr> 
   <td>HtmlWebpackPlugin</td> 
   <td>创建html文件承载输出的bundle</td> 
  </tr> 
  <tr> 
   <td>UglifyjsWebpackPlugin</td> 
   <td>压缩js</td> 
  </tr> 
  <tr> 
   <td>ZipWebpackPlugin</td> 
   <td>将打包出的资源生成一个zip包</td> 
  </tr> 
 </tbody> 
</table>

### 3. mode ###

mode用来指定当前的构建环境，可选的有：production, development和none。

设置mode可以使用webpack内置函数，默认值为production。

mode的内置函数功能：

<table style="width:600px;"> 
 <thead> 
  <tr> 
   <th>选项</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>development</td> 
   <td> <p>process.env.NODE_ENV =&nbsp;development</p> <p>开启NamedChunksPlugin 和 NamedModulesPlugin</p> </td> 
  </tr> 
  <tr> 
   <td>production</td> 
   <td> <p>process.env.NODE_ENV =&nbsp;production</p> <p>开启FlagDependencyUsagePlugin,&nbsp; FlagIncludedChunksPlugin,&nbsp;</p> <p>ModuleConcatenationPlugin,&nbsp; NoEmitOnErrorsPlugin,&nbsp;</p> <p>OccurrenceOrderPlugin,&nbsp; SideEffectsFlagPlugin ，TerserPlugin。</p> </td> 
  </tr> 
  <tr> 
   <td>none</td> 
   <td>不开启任何优化选项</td> 
  </tr> 
 </tbody> 
</table>