WebPack - Plugin (Task)

> (World Wide) Web - (W3|WWW) > Web - Building and Shipping > Web - WebPack

1 - About

Plugins are build tasks.

2 - Steps

  • require() it
  • Add it to the plugins array.
  • Call it with the new operator because a plugin can be use multiple times with different config.
Advertising

3 - Example

WebPack - webpack.config.js

webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
 
const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
 
module.exports = config;

4 - List

5 - Documentation / Reference