Webpack / Laravel Mix / Vue

0_description.md

Webpack / Laravel Mix / Vue

First problem was when I wanted to extract vendors in webpack, chunk files where in the public folder and CSS file is empty.

What I have :

• public/css/app.css (empty file !)
• public/js/app.js (ok but sooo big)
• public/js/0.js, public/js/1.js, ... (chunk files)

To avoid that, we export the JS and CSS webpack configurations in two separate files :

• webpack.css.mix.js
• webpack.js.mix.js

We will use the webpack-chunk-rename-plugin to copy chunk files in correct folder.

Install it with npm install webpack-chunk-rename-plugin --save-dev

Then create the mergeManifest.js file and update your package.json.

The result after npm run dev is :

• public/css/app.css (not empty file)
• public/js/chunks/0.js, public/js/chunks/1.js, ... (chunk files)
• public/js/app.js
• public/js/manifest.js
• public/js/vendor.js
• public/mix-manifest.json

In your Blade file you need to add these lines :

<script src="{{ mix('js/manifest.js') }}"></script>
<script src="{{ mix('js/vendor.js') }}"></script>
<script src="{{ mix('js/app.js') }}"></script>

Current issue

When I run npm run watch on Windows 10, only the JS task is launched, not the SASS (not tested on Linux).

You can launch it separatly with npm run watch.css

Resources

• Original issue
  • Same issue comment #1
  • Same issue comment #2
  • Best solution
    • With same issue comment #3
  • Helped with this repo

1_mergeManifest.js

const ManifestPlugin = require('laravel-mix/src/webpackPlugins/ManifestPlugin');
const merge = require('lodash').merge;

module.exports = (config) => {
    config.plugins.forEach((plugin, index) => {
        if (plugin instanceof ManifestPlugin) {
            config.plugins.splice(index, 1);
        }
    });

    config.plugins.push(new class {
        apply(compiler) {

            compiler.plugin('emit', (curCompiler, callback) => {
                let stats = curCompiler.getStats().toJson();

                try {
                    Mix.manifest.manifest = merge(Mix.manifest.read(), Mix.manifest.manifest);
                } catch (e) {

                }

                Mix.manifest.transform(stats).refresh();
                callback();
            });
        }
    })
};

2_package.json

    "scripts": {
        "dev": "npm run dev.js && npm run dev.css",
        "watch": "npm run watch.js & npm run watch.css",
        "prod": "npm run prod.js && npm run prod.css",
        "watch.css": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --env.mixfile=webpack.css.mix --config=node_modules/laravel-mix/setup/webpack.config.js",
        "dev.css": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack.css.mix --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod.css": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack.css.mix --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch.js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --watch --hide-modules --env.mixfile=webpack.js.mix --config=node_modules/laravel-mix/setup/webpack.config.js",
        "dev.js": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack.js.mix --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod.js": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --env.mixfile=webpack.js.mix --config=node_modules/laravel-mix/setup/webpack.config.js"
    },

3_webpack.css.mix.js

const mix = require('laravel-mix')
const path = require('path')
const mergeManifest = require('./mergeManifest')
mix.extend('mergeManifest', mergeManifest)

mix.webpackConfig({
    resolve: {
        alias : {
            sass: path.resolve(__dirname, 'resources/sass'),
        },
    },
})

mix.sass('resources/sass/app.scss', 'public/css')
    .mergeManifest();

if (mix.inProduction()) {
    mix.version()
} else {
    mix.sourceMaps()
}

4_webpack.js.mix.js

const mix = require('laravel-mix')
const path = require('path')
const mergeManifest = require('./mergeManifest')
const ChunkRenamePlugin = require('webpack-chunk-rename-plugin')

mix.extend('mergeManifest', mergeManifest)

mix.webpackConfig({
    output: {
        chunkFilename: 'js/chunks/[name].js'
    },
    resolve: {
        alias: {
            '@': path.resolve(__dirname, 'resources/js'),
        },
    },
    plugins: [
        new ChunkRenamePlugin({
            initialChunksWithEntry: true,
            '/js/app': 'js/app.js',
            '/js/vendor': 'js/vendor.js',
        }),
    ],
})

mix.js('resources/js/app.js', 'public/js')
    .extract()
    .mergeManifest();

if (mix.inProduction()) {
    mix.version()
} else {
    mix.sourceMaps()
}