Webpack Configuration

Basic Webpack configuration setup

Basic Config

// webpack.config.js
const path = require('path');
module.exports = {
    entry: './src/index.js', # entry point
    output: {
        filename: 'bundle.js', # output file
        path: path.resolve(__dirname, 'dist')
    }
};

Multiple Entry Points

entry: {
    app: './src/app.js',
    vendor: './src/vendor.js'
},
output: {
    filename: '[name].bundle.js' # [name] = entry key
}

Development Mode

mode: 'development' # development mode
mode: 'production' # production mode (minified)

DevServer

devServer: {
    contentBase: './dist', # serve from dist
    port: 8080,
    hot: true, # hot module replacement
    open: true # open browser
}

Source Maps

devtool: 'source-map' # enable source maps
devtool: 'inline-source-map' # inline source maps