Как внедрить хэшированный пакет. js имя файла Webpack в компонент Require JS? - PullRequest
Новая
       6

Как внедрить хэшированный пакет. js имя файла Webpack в компонент Require JS?

0 голосов
/ 24 января 2020

Я использую Webpack для компиляции компонента React в комплект UMD для использования на одной из моих панелей Splunk. Файл JavaScript, который используется на панели мониторинга Splunk, использует Require JS, и для использования моего компонента React мне нужно указать комплект. js в пути конфигурации в этом файле.

В настоящее время у меня есть только две опции: либо вручную обновить путь конфигурации Require JS на стороне Splunk новым пакетом. [Contenthash]. js name, либо просто назовите его как bundle. js без хеширования и очистки кэша в моем браузере при каждом запуске сборки. Есть ли способ для меня использовать Webpack или любые другие средства для вставки этого хэшированного имени пакета в путь конфигурации Require JS, чтобы я мог устранить эту необходимость очищать кэш / обновлять имена файлов вручную при каждом запуске сборки? Я думал о создании сценария Python для этой инъекции, но я хотел бы сначала посмотреть, есть ли более простой подход к этому, предпочтительно с моей существующей установкой.

Моя конфигурация здесь, в в этом случае dashboard-container - это мой встроенный компонент React. Я хотел бы заменить имя пакета в пути и вместо него использовать пакет вставки Webpack. [Contenthash].

Панель инструментов Splunk JS Файл: 

require.config({
   paths: {
     react:
       '/static/app/<splunk_app_name>/<folder_name>/node_modules/react/umd/react.production.min',
     'react-dom':
       '/static/app/<splunk_app_name>/<folder_name>/node_modules/react-dom/umd/react-dom.production.min',
     'dashboard-container': '/static/app/<splunk_app_name>/<folder_name>/dist/bundle'
   }
 });

 require([
   'underscore',
   'backbone',
   'splunkjs/mvc',
   'jquery',
   'react',
   'react-dom',
   'dashboard-container'
 ], function(_, Backbone, mvc, $, React, ReactDOM, DashboardContainer) {
   const serviceList = [
     {name: 'Service 1', status: 'Good'},
     {name: 'Service 2', status: 'Good'},
     {name: 'Service 3', status: 'Error'},
     {name: 'Service 4', status: 'Good'}
   ];
   ReactDOM.render(
     React.createElement(DashboardContainer.default, {serviceList: serviceList}, null),
     document.getElementById('app')
   );
 });

Конфигурация Webpack: 

const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');

 module.exports = {
   entry: './src/js/components/container/DashboardContainer.jsx',
   output: {
     path: path.resolve(__dirname, 'dist'),
     filename: 'bundle.[contenthash].js',
     library: 'DashboardContainer',
     libraryTarget: 'umd'
   },
   module: {
     rules: [
       {
         test: /\.(js|jsx)$/,
         exclude: /node_modules/,
         loader: 'babel-loader'
       },
       {
         test: /\.scss$/,
         use: ['style-loader', 'css-loader', 'sass-loader']
       },
       {
         test: /\.html$/,
         use: [
           {
             loader: 'html-loader'
           }
         ]
       }
     ]
   },
   plugins: [
     new HtmlWebpackPlugin({
       template: './src/index.html',
       filename: './index.html'
     })
   ],
   devtool: 'cheap-module-eval-source-map',
   devServer: {
     contentBase: path.join(__dirname, 'dist')
   }
 };
...