webpack-dev-middleware с браузерной синхронизацией в прокси - PullRequest
Новая
       14

webpack-dev-middleware с браузерной синхронизацией в прокси

0 голосов
/ 26 сентября 2018

Я много искал, но не смог найти ответа на мою проблему, поэтому вот я:

Я пытаюсь объединить рабочий процесс gulp с webpack.Вот как это происходит: - глянуть часы изменения html - дескриптор веб-пакета css и js - все доставляется через браузер-синхронизатор (который использует webpack-dev-middleware) в прокси 'http://192.168.1.123:3000/path/to/project/dist'

Так что, когда браузер создает синхронизациюна его сервере все работает нормально.Но если я попробую через прокси, webpack-dev-middleware не сможет обслуживать пакет.

webpack.config.dev.js 

module.exports = merge(webpackConfig, {

    entry: [
        path.resolve(pathsConfig.root.src, pathsConfig.js.src),
        'webpack/hot/dev-server',
        'webpack-hot-middleware/client'
    ],

    mode: 'development',

    devServer: {
        proxy: {
            '*': {
                target: 'http://192.168.1.123/private/test/dist/',
                changeOrigin: true
            }
        },
    },

    module: {
        rules: [{
            test: /\.(sa|sc|c)ss$/,
            use: [
                "style-loader",
                "css-loader",
                "sass-loader"
            ]
        }]
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ]
});

server.js task 

/*****************************************
 * Server Task
 ******************************************/
/* Import
 ******************************************/
import gulp from 'gulp'
import browserSync from 'browser-sync'
import webpack from 'webpack'
import webpackDevMiddleware from 'webpack-dev-middleware'
import webpackHotMiddleware from 'webpack-hot-middleware'
import path from 'path'

import devConfig from '../config/webpack.config.dev'

/* Settings
 ******************************************/
const browser = browserSync.create()
const bundler = webpack(devConfig)

let serverConfig = {
    // browsersync config
    // server: 'dist',
    proxy: 'http://192.168.1.123/8bitstudio/starter/dist',
    open: 'external',
    files: "dist/**/*",

    // webpack config
    middleware: [
        webpackDevMiddleware(bundler, {
            publicPath: '/',
        }),

        webpackHotMiddleware(bundler)
    ],
}


/* Task
 ******************************************/
const serverTask = function() {
    browser.init(serverConfig)
}


/* Export
 ******************************************/
gulp.task('server', serverTask)
module.exports = serverTask

Пожалуйста, дайте мне знать, если вам нужно что-нибудь еще или если я не ясен.

1 Ответ

0 голосов
/ 27 сентября 2018

Хорошо, я нашел то, что хотел.Мне просто нужно было написать адрес прокси в publicPath!

...