Как использовать скомпилированные файлы webpack на локальном сервере

Я использую

python manage.py runserver для django и webpack-dev-server --mode=development для шаблона на локальной разработке.

Моя файловая структура выглядит следующим образом

/ -  /myproj/
     /defapp/
     /frontend/dist/
     /frontend/static/
     /frontend/templates/
     /frontend/node_modules/
     /static/

Теперь я был готов к развертыванию на сервере, поэтому я сделал webpack --mode=production,

Создал каталог..../frontend/dist

then,,,How can I use this ?

Просто заходит на localhost (manage.py runserver), но никаких шаблонов не появляется.

GET https://localhost:8008/static/js/dashboard.0c3e9ffe26656a1dd3c7.bundle.js net::ERR_ABORTED 404 (Not Found)

Возможно, я не понимаю основную идею webpack...

Для разработки используется сервер dev, но для производства сервер не нужен? Я прав?

Ниже приведен мой webpack.config.js.

const path = require('path');
const { merge } = require('webpack-merge');
const BundleTracker = require('webpack-bundle-tracker');

const entries = {}
for (const fileName of require('fs').readdirSync(path.resolve(__dirname, 'static', 'entries'))) {
  entries[fileName.split('.')[0]] = `./static/entries/${fileName}`
}

const baseConfig = {
  entry: entries,  
  output: {
    filename: 'js/[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        commons: {
          test: /[\\/]node_modules[\\/]/,
          chunks: 'initial', 
          name: 'vendor',
        },
      },
    },
  },
  
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new BundleTracker({
      path: __dirname,
      filename: 'webpack-stats.json',
    }),
  ]
};

const devConfig = merge(baseConfig, {
  mode: 'development',

  output: {
    publicPath: 'http://localhost:3000/static/',
  },

  devServer: {
    client:{
        webSocketURL: 'ws://localhost:3000/ws',
    },
    port: 3000,
    hot: true,
    host: '0.0.0.0',
    allowedHosts: 'all',
    //watchOptions: {
    //  ignored: /node_modules/
    //},
    headers: {
        "Access-Control-Allow-Origin": "*"
    }
  },

});

const productConfig = merge(baseConfig, {
  mode: 'production',
  output: {
    publicPath: '/static/'
  }
})

module.exports = (env, options) => {
  return options.mode === 'production' ? productConfig : devConfig
}

Вернуться на верх