[TOC] ## Basic Plugins for Devlopment ### `html-webpack-plugin`: To generate `index.html` file in the`/dist`folder `html-webpack-plugin` by default will generate its own `index.html` file. ~~~bash npm install --save-dev html-webpack-plugin ~~~ **webpack.config.js** ~~~ const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { ... plugins: [ new HtmlWebpackPlugin({ ? ? ? title: 'Output Management' }) ], ... }; ~~~ ### `clean-webpack-plugin`: Cleaning up the `/dist` folder In general it's good practice to clean the`/dist`folder before each build, so that only used files will be generated.A popular plugin to manage this is the [`clean-webpack-plugin`](https://www.npmjs.com/package/clean-webpack-plugin) ~~~bash npm install --save-dev clean-webpack-plugin ~~~ **webpack.config.js** ~~~ const { CleanWebpackPlugin } = require('clean-webpack-plugin'); module.exports = { ... plugins: [ new CleanWebpackPlugin(), ], ... }; ~~~ ### `webpack-manifest-plugin`: To generate manifest data into a json file The manifest data can be extracted into a json file for easy consumption using the [`WebpackManifestPlugin`](https://github.com/danethurber/webpack-manifest-plugin). ### `split-chunks-plugin`：To avoid duplicated dependencies [[官網文檔]](https://webpack.js.org/plugins/split-chunks-plugin/) Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The `CommonsChunkPlugin` was used to avoid duplicated dependencies across them, but further optimizations were not possible. Since webpack v4, the `CommonsChunkPlugin` was removed in favor of `optimization.splitChunks`.