Question

我进行了很多搜索，但找不到解决问题的任何答案，所以我在这里：

我尝试将gulp工作流程与webpack合并。这是怎么回事： -gulp观看HTML更改 -Webpack处理CSS和JS部分 -全部由代理“ http://192.168.1.123:3000/path/to/project/dist”中的浏览器同步（使用webpack-dev-middleware）交付

因此，当browsersync创建他的服务器时，一切正常。但是，如果我尝试通过代理，则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任务

/*****************************************
 * 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

如果您还有其他需要或不清楚的地方，请告诉我。

Answer 1

好，我找到了想要的东西。我只需要在publicPath中写代理地址！

带有浏览器同步到代理的webpack-dev-middleware

1 个答案: