(精华)2020年7月12日 webpack 常见插件的使用

重点插件plugin介绍

插件与模块解析的功能不一样， 模块解析是为了导入非es5格式js或其它资源类型文件， 定制了一些loader。 插件是对最后的打包文件进行处理的，也可以理解loader是为打包前做准备，plugin是打包再进行处理

• 官方插件的使用步骤(内置插件 2 步) 1 配置文件中导入 XxxxPlugin，constwp=require(XxxxPlugin) 2 在 plugins 这个数组中加入一个插件实例,newwp.XxxxPlugin({对象})

• 第三方插件的使用步骤(第 3 方 3 步，多一次安装) 1 安装(第三方插件要安装)根目录>cnpmi-DXxxxPlugin 2 配置文件中导入插件constXxxxPlugin=require(‘xxxx-plugin’) 3 在 plugins 这个数组中加入一个插件实例,newXxxxPlugin({对象})

• 官方插件有
  可以在配置中打印查看 constwebpack=require(‘webpack’) console.log(webpack)//这里可以看到哪些是 webpack 内置的插件

插件清单

> 01.webpack.BannerPlugin //加注释  
> 02.terser-webpack-plugin //代码缩小，压缩   
> 03.html-webpack-plugin 生成html页  
> 04.extract-text-webpack-plugin，mini-css-extract-plugin //提取抽离css
> 05.DefinePlugin//定义一个全局常量，如newwp.DefinePlugin({BJ:JSON.stringify('北京'),})，在待打包的js文件中可以
> 直接使用，如在./src/main.js中console.log('我是在配置文件中定义的'+BJ) 
> 06.Dllplugins // 允许创建一个在编译时可以配置的全局常量
> 07.copy-webpack-plugin //在 webpack中拷贝文件和文件夹
> 08.optimize-css-assets-webpack-plugin // 压缩css
> 09.assets-webpack-plugin // assets-webpack-plugin 
> 10:EnvironmentPlugin//不同于 DefinePlugin，默认值将被 EnvironmentPlugin 执行 JSON.stringify
> 11.cross-env //scripts设置环境变量
> 12.ProvidePlugin//微服务api配置
> 13.preload-webpack-plugin //让静态资源支持 DNS 预解析和预加载

  

 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
 

文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。

原文链接：codeboy.blog.csdn.net/article/details/107295451