4

Здравствуйте, есть проблема: На сайте с Реактом каждая страница имет свой Энтри Бандл Файл с привязкой на несколько энтри-ИД, собираются бандлы через Вебпак. Хочу подключить "горячую перезагрузку"

...
var buildPath = __dirname + '/public/js/bundles';
module.exports = {
    context: path.join(__dirname, '/resources/scripts'),
    devtool: process.env.NODE_ENV === 'production' ? null : 'inline-source-map',
    entry: {
        ...entries...
        campaigns: [
            'webpack/hot/only-dev-server',
            'webpack-dev-server/client?http://localhost:8080',
            './appjs/campaigns/campaignsEntry.js',
        ]
    },
    output: {
        path: buildPath,
        publicPath: 'http://localhost:8080/',
        filename: process.env.NODE_ENV === 'production' ? '[name]-bundle-[chunkhash].js' : '[name]-bundle.js'
    },
    devServer: {
        hot: true,
        contentBase: buildPath,
        publicPath: 'http://localhost:8080',
        port: 8080,
        headers: { "Access-Control-Allow-Origin": "*" },
        lazy: false,
        stats: { colors: true }
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['es2015-loose', 'react'],
                    plugins: ['transform-object-rest-spread', 'transform-class-properties']
                }
            }
        ]
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development')
        }),
        new webpack.optimize.OccurrenceOrderPlugin(),
    ]
};
if (process.env.NODE_ENV === 'production') {
...
} else {
    module.exports.plugins.push(
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NamedModulesPlugin()
    );
}

1) Связь между страницей и сервером есть

2) Сервер следит за обновлениями и создает новый Бандл

3) Но создает его не локально а "виртуально" (на сколько я верно понял инструкцию)

4) Сервер сообщает клиенту о новом Бандле с Хешом

5) Клиент пытается получиться Бандл по адресу, но получет следующую ошибку raven.js:1074 GET http://localhost:8080/004e386432676c218bd0.hot-update.json 404 (Not Found)

6) Странная штука - в консоли выдает дважди (а при нормальной работе должно только1 раз на сколько я понимаю) 2 raven.js:80 [WDS] App updated. Recompiling...

7) Если я захожу по адресу http://localhost:8080/ то ВебпакСервер выдает список всех бандлов, которые были сделаны "сборщиком" Вебпака локально в папке проекта (public/... - сервер на PHP Laravel), ВебпакСервер же туда не вписывает новый Бандл с хешом, но и не дает его по этому адресу

8) Webpack --version = 2.4.1

ВОПРОС: что я делаю не так?

Спасибо!

2 ответа 2

2
+50

Здесь есть ряд моментов. Давайте по порядку:

  1. В чем смысл вот этого параметра publicPath: 'http://localhost:8080/'? Вы итак на 'localhost:8080'. Этот путь подставляется в HTML к ресурсам, в нем есть смысл, если вы хотите цеплять ресурсы из удаленного источника. Здесь же вам достаточно publicPath: '/'.
  2. devServer.contentBase вообще здесь не нужен, он же не отличается от output.path (поправьте, если я чего-то не понял). Это может быть одной из причин ваших проблем.
  3. Не понятно, где ваш index.html. Он должен либо лежать в output.path, либо вы должны его генерить каким-либо образом, например через html-webpack-plugin и EJS шаблон.

В целом, похоже проблема именно в output.path. Он должен указывать на ваш "WEB_ROOT", так сказать, а не на место, куда вы складываете бандлы. Путь к бандлам надо указывать в шаблоне имени файла:

output: {
    path: path.resolve(__dirname + '/public'),
    publicPath: '/',
    filename: filename: process.env.NODE_ENV === 'production' ? 'js/bundles/[name]-bundle-[chunkhash].js' : 'js/bundles/[name]-bundle.js'
},

devServer: {
    publicPath: "/",
    contentBase: "./public",
    hot: true
}

index.html, при этом, как я уже сказал, после сборки должен быть в /build директории.

2
  • я не на 'localhost:8080' - если я оставлю "/" то он коннектится к моему серверу если я правильно припоминаю. Адресс сервера строчный и прописан в хостах. Стоит Докер с кучей внутренных портов которые я прописываю наружу. Сервер на PHP с nginx, Node JS, Redis, MariaDB... Вебпак запускает паралельно свой Нод Сервер и общаеться с моей страницей которой я и указываю путь сервера с портом через который он слушает. Запрос из страницы идет на PHP сервер, который выдает ее уже с отрендеренными Реакт Компонентами (тоесть целиком) и Бандлом - никаких index.html
    – kosiakMD
    2 мая 2017 в 20:52
  • Подправил output и добавил devServer в свой ответ. Попробуйте и скажите что выдает http://localhost:8080 2 мая 2017 в 23:12
-1

Возможно мой метод будет для вас решением. Нужно запускать webpack-dev-server на внешний ip. Описал в этой статье.

Конфиг будет наподобие этого:

devServer: {
   hot: true,
   contentBase: resolve(__dirname, 'dist'),
   publicPath: '/',
   host: '192.168.3.186'
   port: 7373,
   proxy: {
      '/api/**': {
       target: '192.168.3.186:8000',
       secure: false,
       changeOrigin: true,
     }
   }
},

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.