Laravel-mix: Version produces duplicate files, query strings possible?

[karljakober]

• Laravel Mix Version: 0.9.2
• Node Version: v6.9.5
• NPM Version: 3.10.10
• OS: ubuntu xenial 64bit

Description:

note, no custom babelrc
Hello, I am having issues with my mix producing multiple files with different versions each time i run dev then run production.

along those lines, wouldnt it be nicer to append a querystring to the file in the mix-manifest.json rather than renaming the files entirely? if there is a reason behind this id be curious to know. With a query string it would allow people like me who are in poor habit of commiting dist files to repo to not have to commit new files and delete others each commit

Steps To Reproduce:

Version css files
npm run dev
npm run production
npm run dev
npm run production

edited cause overthinking

[vedmant]

I think it's a good option to make url with hash in query instead of files names, just something like:
mix-manifest.json

{
  "/js/app.js": "/js/app.js?b3e6455698737fb57cc1"
}

It would also solve HMR issue I think.

[DannyFeliz]

Same error here, I have a lot of duplicated js

[garbinmarcelo]

@KarlJakober Did you solve it? I have a similar problem with CSS files.

[ruchern-chong]

clean-webpack-plugin.

[MicroDroid]

@ruchern What's with that?

[ruchern-chong]

@MicroDroid https://github.com/johnagan/clean-webpack-plugin

[garbinmarcelo]

@ruchern Ok, but does this work with the "npm run watch"?

[ruchern-chong]

@marcelogarbin Depends on your configuration.

[MicroDroid]

Well I never needed to configure such a plugin before, I wonder why do we need it now 🤔

[garbinmarcelo]

@ruchern In what configuration?

I'm using:

• Windows 10 with Homestead last version.

My package.json:

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "prod": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "copy-webpack-plugin": "^4.0.1",
    "cross-env": "^3.2.3",
    "imagemin-mozjpeg": "^6.0.0",
    "imagemin-webpack-plugin": "^1.4.4",
    "laravel-mix": "0.*",
    "lodash": "^4.17.4",
    "purifycss-webpack": "^0.6.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1"
  },
  "dependencies": {
    "postcss-discard-comments": "^2.0.4"
  }
}

My webpack.mix.js:

/* EXECUTANDO
 * RUN ALL MIX TASKS
 */
// npm run dev
/*
 * RUN ALL MIX TASKS AND MINIFY OUTPUT
 */
// npm run prod
/*
 * WATCHING ASSETS FOR CHANGES
 */
// npm run watch OU npm run watch-poll (caso nao estiver atualizando)

const { mix } = require('laravel-mix');

// Pacotes de terceiros
let ImageminPlugin    = require('imagemin-webpack-plugin').default;
let CopyWebpackPlugin = require('copy-webpack-plugin');
let imageminMozjpeg   = require('imagemin-mozjpeg');

// Configurações
let config = {
    host:     '192.168.1.80',
    base_url: 'admin.dev'
};

// Disable toast notifications
mix.disableNotifications();

mix.options({
    cleanCss: {
        level: {
            1: {
                specialComments: 'none'
            }
        }
    },
    postCss: [
        require('postcss-discard-comments')({ removeAll: true })
    ],
    purifyCss: false
});

// Tradução Laravel pt-BR - Copia pasta pt-BR para resources/lang
//mix.copyDirectory('vendor/caouecs/laravel-lang/src/pt-BR', 'resources/lang/pt-BR');
// Images - copia pasta para public/images
mix.copyDirectory('resources/assets/images', 'public/images');

// Copia arquivos de terceiros
// Fonts
mix.copy([
    'bower_components/bootstrap/dist/fonts',
    'bower_components/font-awesome/fonts'
], 'public/fonts');

// Compila estilo SASS
mix.sass('resources/assets/sass/style.scss', 'public/css');
mix.sass('resources/assets/sass/loginForm_style.scss', 'public/css');
mix.sass('resources/assets/sass/responsive.scss', 'public/css');

// Agrupa CSS
mix.styles([
    'bower_components/bootstrap/dist/css/bootstrap.css',
    'bower_components/font-awesome/css/font-awesome.css',
    'bower_components/select2/dist/css/select2.css',
    'bower_components/animate.css/animate.css',
    'bower_components/hover/css/hover.css',
    'bower_components/lity/dist/lity.css',
    'bower_components/SpinKit/css/spinkit.css',
    'bower_components/sweetalert2/dist/sweetalert2.css',
    'bower_components/pretty-checkbox/src/pretty.min.css',
    'public/css/style.*.css',
    'public/css/responsive.*.css'
], 'public/css/app.css');

mix.styles([
    'bower_components/bootstrap/dist/css/bootstrap.css',
    'bower_components/font-awesome/css/font-awesome.css',
    'bower_components/pretty-checkbox/src/pretty.min.css',
    'public/css/loginForm_style.*.css'
], 'public/css/loginForm_style.css');

// Agrupa JS
mix.scripts([
    'bower_components/jquery/dist/jquery.js',
    'bower_components/bootstrap/dist/js/bootstrap.js',
    'bower_components/select2/dist/js/select2.full.js',
    'bower_components/sweetalert2/dist/sweetalert2.js',
    'bower_components/lity/dist/lity.js',
    'bower_components/parallax/deploy/jquery.parallax.js',
    'bower_components/wow/dist/wow.js'
], 'public/js/app.js');

mix.scripts([
    'bower_components/jquery/dist/jquery.js',
    'bower_components/bootstrap/dist/js/bootstrap.js'
], 'public/js/basic.js');


// Version
mix.version();

// Comprime imagens quando em produção (npm run prod)
if(mix.config.inProduction) {
    mix.webpackConfig({
        plugins: [
            new CopyWebpackPlugin([{
                from: 'resources/assets/images',
                to: 'images', // Laravel mix will place this in 'public/images'
            }]),
            new ImageminPlugin({
                test: /\.(jpe?g|png|gif|svg)$/i,
                plugins: [
                    imageminMozjpeg({
                        quality: 70,
                    })
                ]
            })
        ]
    });
}

// Browserfy
mix.browserSync({
    files: [
        'resources/views/**/*.*',
        'public/css/*.*',
        'public/js/*.*',
        'app/Modules/**/Resources/views/**/*.*'
    ],
    host: config.host,
    proxy: config.base_url,
    port: 3000,
    online: true,
    logConnections: false,
    reloadOnRestart: false,
    notify: false,
    open: false //false, local, external, ui, tunnel
    // injectChanges: true,
});

[garbinmarcelo]

@MicroDroid I would also like to know what happened.... or what I am doing wrong....

[geodeveloper]

Same here. This problem didn't exist with Elixir.

[ankurk91]

• Install clean-webpack-plugin

npm i clean-webpack-plugin --save-dev

• Update your webpack-mix.js

const mix = require('laravel-mix');
const CleanWebpackPlugin = require('clean-webpack-plugin');
// Your mix setup may goes here
// mix.js(....)

// Add this to very bottom of your webpack-mix.js
mix.webpackConfig({
  plugins: [
    new CleanWebpackPlugin(['./public/js', './public/css', './public/fonts'])
  ]
});

[geodeveloper]

Thanks, @ankurk91. That is working, but I have an issue with this. I use mix.copy and for somehow reason the copy always executes first when building, then the CleanWebpackPlugin it's doing its job but now I have build with missing files.

[ankurk91]

The latest v1.00.beta should solve this issue

[karljakober]

Why was this closed? This doesn't include the ability to use query strings rather than file names.

[laracasts]

Yes, we exclusively use querystrings now.
On Fri, Jul 21, 2017 at 7:07 PM Karl Jakober [e-mail]
wrote:

Why was this closed? This doesn't include the ability to use query strings
rather than file names.

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/JeffreyWay/laravel-mix/issues/640#issuecomment-317132218,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AFkAAg4bo_NFXJE2FpwIk9pBTnJqeuIxks5sQS8YgaJpZM4MtiP4
.

[karljakober]

Beautiful!!! thank you :)