Webpack 常用的plugin与用法 loader与plugin的区别

目录

• plugins 理念 plugins 与 loaders
  • 常用插件
  • 如何使用

 

plugins 理念 plugins 与 loaders

loaders: 处理 webpack 用来解析 webpack 不能转换的文件，主要作用是翻译
plugins: 用于 bundle 文件的优化、资源管理和环境变量注入，作用于整个构建过程，主要作用是增强

任何 loader 没办法做的事情都可以用 plugins 实现，比如构建之前删除目录，可以用 plugins 替我们完成
作用于整个构建过程意味着从构建开始到结束整个阶段都可以使用 plugins

常用插件

CommonsChunkPlugin: 将 chunks 相同的模块提取成公共 js
CleanWebpackPlugin: 清理构建目录
ExtractTextWebpackPlugin: 将 css 文件从 bundle 里提取成一个独立的 css 文件
CopyWebpackPlugin: 将文件或者文件夹拷贝到构建的输出目录
HtmlWebpackPlugin: 创建 html 文件去承载输出的 bundle(多页面打包，自动创建一个 html 文件，而不是手动创建)
UglifyjsWebpackPlugin: 压缩 js
ZipWebpackPlugin: 将打包的资源生成一个 zip 包

如何使用

放到配置plugins数组即可

module.exports = {
    output:{
        filename:'bundle.js',
    },
    plugins:[
        new HtmlWebpackPlugin({teamplate:'./src/index.html'})
    ]

}