Home > Developer > Web Develop
Plug-ins (Plugins) are used to extend the functionality of Webpack, which take effect throughout the build process and perform related tasks.
Loaders and plugins are often confused, but they are really different things, so to say, loaders is used to process the source files during the package build process (jsx,scss,less. ), one process at a time, the plug-in does not directly manipulate a single file, it directly affects the entire build process.
Webpack has a lot of built-in plugins, and there are a lot of third-party plugins that allow us to do a richer function.
ways to use plug-insTo use a plugin, we need to npm install it, and then we have to add an instance of the plugin in the Plugins keyword section of the Webpack configuration (plugins is an array) to continue with the above example, we add a plugin that adds a copyright notice to the packaged code.
Const WEBPACK = require (' Webpack '); module.exports = {... Module: { rules: [ { test:/(\.jsx|\.js) $/, use : { loader: "Babel-loader" }, exclude:/ Node_modules/ }, { test:/\.css$/, use : [ { loader: ' Style-loader ' }, { Loader: "Css-loader", options: { modules:true } }, { loader: "Postcss-loader" } ] } ] }, plugins: [ new Webpack. Bannerplugin (' All rights reserved, pirated must be ') ],};Through this plugin, the packaged JS file is displayed as follows
This is the basic use of Webpack plug-ins, the following to recommend a few common plug-ins
HtmlwebpackpluginThe purpose of this plugin is index.html to create a new one that automatically references your packaged JS file based on a simple template index.html . This is useful at each time the JS file name is generated (such as adding a hash value).
Installation
NPM Install--save-dev Html-webpack-plugin
This plugin automates some of the things we've done manually before, and we need to make some changes to the project structure that we've been working on since the official use:
index.html file will be automatically generated, in addition to the CSS has been previously packaged into JS.index.tmpl.html file template, this template contains the title necessary elements, during the compilation process, the plugin will be based on this template to generate the final HTML page, will automatically add the dependent CSS, Js,favicon and other files, index.tmpl.html The template source code in is as follows:<!DOCTYPE HTML><HTMLLang= "en"> <Head> <MetaCharSet= "Utf-8"> <title>Webpack Sample Project</title> </Head> <Body> <DivID= ' root '> </Div> </Body></HTML>
3. Update webpack The configuration file, the same way, create a new build folder to hold the final output file
Const WEBPACK = require (' Webpack '); const Htmlwebpackplugin = require (' Html-webpack-plugin '); module.exports = {entry: _ _dirname + "/app/main.js",//The only import file that has been mentioned several times output: {path: __dirname + "/build", FileName: "Bundle.js"} , Devtool: ' Eval-source-map ', Devserver: {contentbase: './public ',//directory where the local server loads the page Historyapifallba ck:true,//do not jump inline:true//real-time Refresh}, module: {rules: [{test:/(\.jsx|\.js ) $/, use: {loader: "Babel-loader"}, exclude:/node_modul Es/}, {test:/\.css$/, use: [{ Loader: "Style-loader"}, {loader: "Css-loader", O Ptions: {modules:true}}, { Loader: "Postcss-loader"}]}]}, plugins: [New Webpack. Bannerplugin (' Copyright, pirated '), new Htmlwebpackplugin ({Template: __dirname + "/app/index.tmpl.html"//new A Plug-in instance, and pass in the relevant parameters})],};
Execute again npm start and you will find that the build folder is generated below bundle.js and index.html .
Hot Module Replacement(HMR) is also a useful plugin in Webpack, which allows you to automatically refresh the real-time preview of a modified effect after modifying the component code.
The implementation of HMR in Webpack is also simple and requires only two configurations
However, after the configuration of these, JS module is still not automatically hot loading, but also in your JS module to execute a Webpack provided API to achieve hot loading, although this API is not difficult to use, but if it is react module, With our already familiar Babel, it is more convenient to implement hot load of function.
To organize our ideas, the specific implementation method is as follows
Babeland webpack a standalone tool.react-transform-hrm plug-in called, you can not do the React module for additional configuration under the premise that HMR normal operation;Or continue to the example to actually see how to configure
Const WEBPACK = require (' Webpack '); const Htmlwebpackplugin = require (' Html-webpack-plugin '); module.exports = {entry: _ _dirname + "/app/main.js",//The only import file that has been mentioned several times output: {path: __dirname + "/build", FileName: "Bundle.js"} , Devtool: ' Eval-source-map ', Devserver: {contentbase: './public ',//directory where the local server loads the page Historyapifallba ck:true,//do not jump Inline:true, hot:true}, module: {rules: [{test: /(\.jsx|\.js) $/, use: {loader: "Babel-loader"}, Exclude: /node_modules/}, {test:/\.css$/, use: [{ Loader: "Style-loader"}, {loader: "Css-loader", Options: {Modules:true}}, { Loader: "POStcss-loader "}]}]}, plugins: [New Webpack. Bannerplugin (' Copyright, pirated '), new Htmlwebpackplugin ({Template: __dirname + "/app/index.tmpl.html"//new A Plug-in instance, and pass in the relevant parameters}), new Webpack. Hotmodulereplacementplugin ()//Gegas loading plug],};
Installationreact-transform-hmr
NPM Install--save-dev babel-plugin-react-transform REACT-TRANSFORM-HMR
Configure Babel
. babelrc{ "presets": ["React", "es2015"], "env": { "development": { "plugins": [["React-transform ", {" transforms ": [{ " transform ":" REACT-TRANSFORM-HMR ", " Imports ": [" react "], " locals ": [" Module "]} ]} ]" }}}Now when you use react, you can heat up the module, and each time you save it you'll see the update on your browser.
Webpack use Six
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
