laravel-elixir-webpack icon indicating copy to clipboard operation
laravel-elixir-webpack copied to clipboard

How to use it and reference bundle.js

Open cve opened this issue 9 years ago • 7 comments

Hi,

thanks for that package. I'm running gulp and a webpack task generates for me public/js/fd4e5febe93787dc519d.js How can I reference it in my app.blade.php? What about webpack-dev-server? How to use it with Laravel at all? Some example will be very helpful

cve avatar Jun 15 '15 21:06 cve

You should look at the advanced implementation and set your output file to be versioned by elixir, so you can use the Laravel helper {{ elixir('your-bundle-output-file') }}

I hope I have been clear, if you have any question let me know.

joecohens avatar Jun 16 '15 06:06 joecohens

https://github.com/joecohens/laravel-elixir-webpack#advanced-example

joecohens avatar Jun 16 '15 06:06 joecohens

Thanks, it help, but I have the problem with images, my gulpfile:

var elixir = require('laravel-elixir');

require("laravel-elixir-webpack");

elixir(function (mix) {
    mix.webpack("main.coffee", {
        outputDir: "public/js",
        output: {
            filename: "[name].js"
        },
        module: {
            loaders: [
                { test: /\.coffee$/, loader: "coffee" },
                { test: /\.less$/, loader: "style!css!less" },
                { test: /\.(png|jpg)$/, loader: 'url-loader?limit=50' }
            ]
        },
        resolve: {
            extensions: ["", ".coffee", ".js"]

        }
    })
});

my tree structure:

structure

main.coffee:

require '../less/commons.less'

mod = require './test'

mod.dwa()

my.less:

body {
    background: #000 url('../images/product-image-placeholder.png');
}

test.coffee:

require '../less/my.less'

module.exports =
    loguje: ->
        console.log 'to jest mój test'
    dwa: ->
        console.log 'nowy log'

after command gulp it gives me that output:

console

and image is placed in public like the following:

public

When I run run artisan serve the image is 404 and wrong path says in console:

console_chrome

cve avatar Jun 16 '15 11:06 cve

any time to help?

cve avatar Jun 23 '15 21:06 cve

I haven't used the url-loader yet, but I think you problem can be related to https://github.com/webpack/less-loader/issues/38 ?

joecohens avatar Jun 23 '15 22:06 joecohens

I get the error:

Uncaught SyntaxError: Unexpected token import

After trying to replace Browserify with Webpack. It could be nice with some tutorial for people going from Browserify to Webpack.

simplenotezy avatar May 11 '16 21:05 simplenotezy

has anyone got a solution for the images 404 error... it's happening with image-webpack-loader as well...

@joecohens, what you last mentioned didn't work.

emahuni avatar Sep 24 '16 11:09 emahuni