Webpack (Archive)

configgitdjangopathhttp

Note: everything on this page targets Webpack 1. Webpack is at version 5, and the v1 documentation is gone: webpack.github.io/docs/ answers 404 and there is no v1.webpack.js.org. For current documentation, see the official Webpack site.

Webpack 1 with Django

Config used inside a Django project, with the hot module replacement plugin set up. webpack-bundle-tracker writes the built bundle names into webpack-stats.json, which the Django side reads to resolve the hashed filenames.

var path = require("path")
var webpack = require('webpack')
var BundleTracker = require('webpack-bundle-tracker')

module.exports = {
        context: __dirname,
        entry: {
            package1: [
                'webpack-dev-server/client?http://localhost:3000',
                'webpack/hot/only-dev-server',
                './my_assets_path/package1'
            ],
            package2: [
                'webpack-dev-server/client?http://localhost:3000',
                'webpack/hot/only-dev-server',
                './my_assets_path/package2'
            ]
        },
        output: {
            path: path.resolve('./static/'),
            filename: '[name]-[hash].js',
            publicPath: 'http://localhost:3000/'
        },
        plugins: [
            new webpack.HotModuleReplacementPlugin(),
            new webpack.NoErrorsPlugin(),
            new BundleTracker({filename: './webpack-stats.json'})
        ],
        module: {
            loaders: [
                {test: /\.s[ac]ss$/, loaders: ["style", "css", "sass?sourceMap"]},
                {test: /\.jsx?$/, exclude: /node_modules/, loaders: ['react-hot', 'babel']},
            ]
        },
        resolve: {
            modulesDirectories: ['node_modules', 'bower_components'],
            extensions: ['', '.js', '.jsx']
        },
        externals: {
            'jquery': 'jQuery',
        }
    }

Instead of webpack --watch, a server.js that runs the dev server with hot reload:

var webpack = require('webpack')
var WebpackDevServer = require('webpack-dev-server')
var config = require('./webpack.config')

new WebpackDevServer(webpack(config), {
      publicPath: config.output.publicPath,
      hot: true,
      inline: true,
      historyApiFallback: true
    }).listen(3000, '0.0.0.0', function (err, result) {
      if (err) {
        console.log(err)
      }

      console.log('Listening at 0.0.0.0:3000')
    })

Matching package.json:

{
  "name": "acme",
  "version": "...",
  "description": "Boilerplate",
  "main": "server.js",
  "repository": {
    "type": "git",
    "url": "git+ssh://git@...acme.git"
  },
  "author": "",
  "license": "GFYL",
  "homepage": "https://.../...#readme",
  "devDependencies": {
    "babel": "^6.3.26",
    "babel-core": "^6.3.26",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "babel-preset-stage-1": "^6.3.13",
    "babel-preset-stage-2": "^6.3.13",
    "css-loader": "^0.23.1",
    "node-sass": "^3.4.2",
    "react": "^0.14.3",
    "react-hot-loader": "^1.3.0",
    "sass-loader": "^3.1.2",
    "style-loader": "^0.13.0",
    "webpack": "^1.12.9",
    "webpack-bundle-tracker": "0.0.9",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.2"
  }
}

Config examples from that era

LeanJS, my own starter.
Mozilla Neo, archived by Mozilla in 2019.

Webpack (Archive)

Webpack 1 with Django

Config examples from that era

Related