webpack常用插件

 

1 copy-webpack-plugin

Copies individual files or entire directories, which already exist, to the build directory
webpack-copy-plugin is not designed to copy files generated from the build process; rather, it is to copy files that already exist in the source tree, as part of the build process.

## copy文件到打包的文件夹当中，只能copy已经存在的文件

 

2 filemanager-webpack-plugin

This Webpack plugin allows you to copy, archive (.zip/.tar/.tar.gz), move, delete files and directories before and after builds

## 文件管理插件，可以在打包前以及打包后 对所有的文件进行拷贝，压缩，移动，删除等相关操作

 

3 html-webpack-plugin

This is a webpack plugin that simplifies creation of HTML files to serve your webpack bundles.

## 以一个html文件为模板，生成一个html文件，并将打包生成的js文件注入当中

 

4 Clean plugin for webpack

By default, this plugin will remove all files inside webpack's output.path directory, as well as all unused webpack assets after every successful rebuild

## 只会移除webpack's output.path directory 目录下的文件，(比如你生成的目录是dist，那么它只会移除dist下面的文件，但是不包含dist本身)

 

5 webpack.ProvidePlugin

new webpack.ProvidePlugin({
    $: 'jquery',
    _: 'lodash'
})

## 垫片插件 ，当我们在代码中使用到相关的变量，但是没有引入相关的模块时，该插件会自动帮我们引入

 

6 add-asset-html-webpack-plugin

After webpack 4+, it is required to apply AddAssetHtmlPlugin after HtmlWebpackPlugin

## 必须要在HtmlWebpackPlugin插件之后使用它，往生成的html文件当中额外插入资源文件

 

7 webpack.DllReferencePlugin

new webpack.DllReferencePlugin({
    manifest: path.resolve(__dirname, './dll', file)
}), 

## 当打包第三方模块时，首先会通过这个映射去查找，查看这个模块是否被打包，如果找不到再去node_modules