Laravel 5.4 Mix and CoffeeScript

In case anyone needs to use CoffeeScript with Laravel Mix, here's how:

First, install coffee-loader

npm install coffee-loader --save-dev

Next, open this folder from inside your project

node_modules/laravel-mix/setup

... and copy the file webpack.config.js to the base of your project.

Next, open package.json and change the paths to the config-file listed under "scripts". It should look something like this:

"dev": "(...) --config=webpack.config.js",
"watch": "(...) --config=webpack.config.js",
"hot": "(...) --config=webpack.config.js",
"production": "(...) --config=webpack.config.js"

Now, look for these lines inside the webpack.config.js that you copied:

module.exports.module = {
    rules: [

Inside the rules-array, add these lines:

{
    test: /\.coffee$/,
    loader: 'coffee-loader'
}

You're done. Now you can reference .coffee-files from your webpack.mix.js:

mix.js('app.coffee', 'public/js')

For Laravel Framework 5.4.29 I had to do the following:

First, install coffee-loader

npm install coffee-loader --save-dev

And continue doing what @effkay said:

Copy the webpack.config.js file from node_modules/laravel-mix/setup to your root folder.

cp node_modules\laravel-mix\setup\webpack.config.js ./

The difference comes here, it seems like the webpack.config.js is different in this version it's separated in different files

then, modify it (webpack.config.js) so it references de right files: require('.../src/index'); would now be:

require('./node_modules/laravel-mix/src/index');

And let WebpackConfig = require('../src/builder/WebpackConfig'); set it to:

let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');

Now what I did was the following, instead of module.exports = new WebpackConfig().build(); I did append the new rule this way:

let configFinal = new WebpackConfig().build();

let customRules = [];
customRules.push({
    test: /\.coffee$/,
    loader: 'coffee-loader'
});

//Append the new rule to the default ones
configFinal.module.rules = configFinal.module.rules.concat(customRules);

module.exports = configFinal;

So, now you can modify your package.json as @effkay said, like so:

"dev": "(...) --config=webpack.config.js",
"watch": "(...) --config=webpack.config.js",
"hot": "(...) --config=webpack.config.js",
"production": "(...) --config=webpack.config.js"

and now in your webpack.mix.js feel free yo use coffescript sources:

mix.js('public/assets/principal.coffee', 
 'public/assets/principal.min.js');

For some reason, the build fails related to UglifyJs when running npm run production. Any thoughts?