Search code examples
javascriptlaravelwebpackwebpack-dev-serverlaravel-valet

Webpack-Dev-Server + Laravel, access from network devices doesn't inject css via js from memory


I managed to get webpack-dev-server and laravel valet serving the site and redirect to the right path on mobile devices in the same network.

However it won't inject css via js served from memory. It would only work if i write the js/css onto disk what wouldn't be optimal. I believe the js on the mobile device is not pointing through the proxy but i can't figure out how to do it.

thanks a lot guys, much appreciated

entry: {
    'app.bundle': './src/scripts/index.js',
  },
  cache: true,
  output: {
    filename: '[name].js',
    publicPath: 'http://localhost:8080/',
    chunkFilename: '[chunkhash].js',
  },
      .
      .
      .
   devServer: {
    hot: true,
    inline: true,
    overlay: false,
    quiet: true,
    host: '0.0.0.0',
    proxy: {
      '*': {
        target: 'http://laravelapp.dev/',
        changeOrigin: true,
      },
    },
    disableHostCheck: true,
    contentBase: path.resolve(__dirname, './src/templates'),
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    watchContentBase: true,
    watchOptions: {
      poll: false, // might be needed for homestead/vagrant setup, review
    },
    historyApiFallback: false,
    noInfo: true,
  },

Solution

  • Got it working changing the entry in my webpack.config :

    entry: {
        'app.bundle.js': [
          'webpack-dev-server/client?http://localhost:8080',
          'webpack/hot/only-dev-server',
          './src/scripts/index.js',
        ],
      },`
      output: {
        filename: '[name].js',
        publicPath: '/',
        chunkFilename: '[chunkhash].js',
      },
          .
          .
          .
       devServer: {
        hot: true,
        inline: true,
        host: '0.0.0.0',
        proxy: {
          '*': {
            target: 'http://laravelapp.dev/',
            changeOrigin: true,
          },
        },
        disableHostCheck: true,
        headers: {
          'Access-Control-Allow-Origin': '*',
        },
        watchContentBase: true,
        historyApiFallback: false,
      },