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 '})]