webpackで本番用の設定を作成

django-webpack-loader のセットアップの続きです

公式のProductionを参照しました

npm install --save-dev webpack-merge

本番用の設定を切り分けます

開発、本番の共通部分をwebpack.common.jsとします

webpack.common.js

const webpack = require('webpack')

module.exports = {
  context: __dirname,
  entry: {
      main: './assets/js/main.js' // エントリ名とエントリポイント
  },

  output: {
      filename: "[name]-[hash].js",
  }
}

開発用の設定webpack.dev.js

webpack.dev.js

const path = require("path")
const merge = require('webpack-merge')
const BundleTracker = require('webpack-bundle-tracker')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'develepment',
  output: {
      path: path.resolve('./assets/bundles/'),
  },
  plugins: [
    new BundleTracker({filename: './webpack-stats-dev.json'}),
  ],
});

本番用の設定`webpack.prod.js'

webpack.prod.js

const path = require("path")
const merge = require('webpack-merge')
const BundleTracker = require('webpack-bundle-tracker')
const common = require('./webpack.common.js')

module.exports = merge(common, {
  mode: 'production',
  output: {
      path: path.resolve('./MYSITE/static/dist/'),
  },
  plugins: [
    new BundleTracker({filename: './webpack-stats-prod.json'}),
  ],
});

django-webpack-loader

settings.py

...
if not DEBUG:
    WEBPACK_LOADER['DEFAULT'].update({
        'CACHE': True,
        'BUNDLE_DIR_NAME': 'dist/',
        'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats-prod.json')
    })
...