Webpack Plugin Plugin

Recently you have seen the use of Webpack plug-ins to sum up a, Html-webpack-plugin plug-ins

Documents: Https://github.com/jantimon/html-webpack-plugin#configuration
Function:: After compiling, change the old JS name in our HTML file
Usage:

NPM Install--save-dev Html-webpack-plugin

Webpack.config.js configuration:

Const Htmlwebpackplugin = require (' Html-webpack-plugin ');

Module.exports = {
 plugins:[
      new Htmlwebpackplugin ({
        title: ' Output Management '/title name
      }),
   ]
}

Second, Clean-webpack-plugin Plug-ins

Documents: Https://github.com/jantimon/html-webpack-plugin (Https://www.npmjs.com/package/clean-webpack-plugin)
Function: Clear past compiled code
Usage:

NPM Install Clean-webpack-plugin--save-dev

Webpack.config.js

Const Cleanwebpackplugin = require (' Clean-webpack-plugin ');
Module.exports = {
  plugins:[
      new Cleanwebpackplugin ([' Build/js '])//clear path Build/js
   ]
}

Third, Extract-text-webpack-plugin Plug-ins

Documents: Https://github.com/webpack-contrib/extract-text-webpack-plugin
function: Separate CSS styles and introduce HTML in link mode
Usage:

NPM Install--save-dev Extract-text-webpack-plugin

Webpack.config.js

Const Extracttextplugin = require (' Extract-text-webpack-plugin ');

 module:{
      rules:[
          {
            test:/\.css$/,
            use:ExtractTextPlugin.extract ({use
              : ' Css-loader '
            })
          },
          {
            test:/\.less$/,
            use:ExtractTextPlugin.extract ({
              use:[' css-loader ', ' Less-loader ') }
          },
      ]
   },
   plugins:[ 
      new Extracttextplugin (' Styles.css ')
   ]

Four, automatic loading module provideplugin

To introduce jquery as a column

 Const Webpack = require (' Webpack '); plugins:[new Webpack. Provideplugin ({$: ' jquery ', jquery: ' jquery ', ' window.jquery ': ' jquery ', ' window.$ ': ' Jqu Ery '})]