First, what is plugins
plugins can make webpack run to some point of time, helping you to do something similar to the life cycle of the same
plugins, it is an extender, it enriches wepack itself, for after the end of the loader, webpack whole package
A process that does not directly manipulate files, but event-based mechanism to work, listens to some of the packaging process node webpack
二、html-webpack-plugin
1, the installation
cnpminstallhtml-webpack-plugin-D
2, the role of
After the package will automatically generate a html file, and the package is automatically generated js introduced into the html while also with chunks of configuration items multi-page development
3, the basic use
plugins:[
newHtmlWebpackPlugin({
filename:"index.html",
template:"./index.html",
inject:"head",
chunks:["app"],
minify:{
removeComments:true,
collapseWhitespace:true
}
})
]
filename: the package generated html file name of
Use the template: template
inject: JS introduced in which part of the page
chunks: JS introduction of the specified file
minify: html file compression
removeComments: Remove the comment
collapseWhitespace: remove the spaces
favicon: icons
三、clean-webpack-plugin
1, the installation
cnpminstallclean-webpack-plugin-D
2, the role of
Regenerates a dist file every time we pack when similar dist delete a file on first, and then rebuild a dist directory
3, the basic use
constCleanWebpackPlugin=require("clean-webpack-plugin");
module.exports={
plugins:[
newCleanWebpackPlugin(["dist"])
]
}
Parameter is an array, the directory is to be deleted, when the package will pass clean-webpack-plugin dist directory will be deleted
四、extract-text-webpack-plugin
1, the installation
cnpminstall-Dextract-text-webpack-plugin@next
2, the role of
The plugin is mainly for detached css style, the style pack will prevent loading the page style cause confusion and JS file is too large in the js and other phenomena
3, the basic use
const ExtractTextPlugin = the require ( "Extract-text-WebPACK-plugin");
Module1. Exports = { Module1: { the rules: [ { Test: /\.(css|scss)$/, use: . ExtractTextPlugin Extract ({ // after compiling to extract what loader css file fallback: "style-loader", // refers to what the loader needs to compile the file, here since the source file is .css so-loader select CSS use: [ "CSS-loader", "Sass-Loader"] }) }, ] }, plugins: [ new new ExtractTextPlugin ( "CSS / [name] .css") // or new new ExtractTextWebpackPlugin ({ filename:
'[name].[hash:8].css',
allChunks: true
}),
]
}
Five, HotModuleReplacementPlugin (problem)
1, the installation
cnpm install webpack -D
2, the role of
Enable heat module replacement, also known as HMR.
Never enable the HMR in a production environment (production)
When code generation is mainly used to change the local code block can be replaced without updating the refresh's browser. This is useful in many situations, such as when dealing with pop-up box, use the HMR can see the changes in a timely manner, if the refresh will tour's way back to the original page.
3, the basic use
plugins: [
new new webpack.HotModuleReplacementPlugin (), // hot update!
]