Table of Contents

• Webpack Concepts
• Entry
• Ouptut

Webpack Concepts tutorial

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;

• entry indicates which module webpack should use to begin building out its internal dependency graph.
• output tells webpack where to emit the bundles it creates and how to name these files.
• module (loaders) is used to more than just JavaScript files
• plugins can be leveraged to perform a wider range of tasks.

Entry

const config = {
  entry: {
    app: './src/app.js',
    vendors: './src/vendors.js'
  }
};

const config = {
  entry: {
    pageOne: './src/pageOne/index.js',
    pageTwo: './src/pageTwo/index.js',
    pageThree: './src/pageThree/index.js'
  }
};

Ouptut

filename: "bundle.js"
filename: "[name].bundle.js"
filename: "[id].bundle.js"
filename: "[name].[hash].bundle.js"
filename: "[chunkhash].bundle.js"