Laravel Mix (4.0.15)
OS Ubuntu 18.04
Steps to Reproduce:
Create a New laravel project (Laravel 5.8, as it uses laravel-mix 4)
Import a component dynamically.
Vue.component('example', () => import('./components/Example.vue'));
I have been using babel dynamic import to import this.
"#babel/plugin-syntax-dynamic-import": "^7.2.0",
You may need .babelrc in the root.
try to put the chunks file into public/js/prod It works file till now.
let mix = require('laravel-mix');
mix.webpackConfig({
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
// 'vue$': 'vue/dist/vue.esm.js',
'#': __dirname + '/resources/assets/js'
},
},
output: {
chunkFilename: 'js/prod/[name].js',
},
});
mix.js('resources/assets/js/app.js', 'js')
.version();
try to extract the plugins, & It causes problem.
mix.js('resources/assets/js/app.js', 'js')
.mix.extract(['vue','jquery', 'popper.js'])
.version();
Now the file app.js and vendor.js goes to js/prod//js/app.js and js/prod//js/vendor.js respectively.
There is no way to put the app.js and vendor.js in /js and chunks in /js/prod. In the previous version which was available.
Related
I have a Laravel 5.8 app with Vue 2 and laravel-mix 4.0. (webpack 4.46.0)
I have lazy loading in my routes file like this:
const HomePageView = () => import(/* webpackPrefetch: true */"./views/HomePageView.vue");
in my webpack.mix.js I have the following configuration to add hashes to the names of the bundles
mix.react('resources/js/app.js', 'public/js')
.copy('node_modules/lodash/lodash.min.js', 'public/js')
.extract(['vue', 'jquery'])
.webpackConfig({
output: {
chunkFilename: '[name].[contenthash:8].js'
},
Before adding the hashes, i used to load the app.js and vendor.js directly in my .blade.html,
...more blade html
<script src="{{asset('js/vendor.js')}}?v={{getAssetsVersion()}}"></script>
<script src="{{asset('js/app.js')}}?v={{getAssetsVersion()}}"></script>
</body>
</html>
but now that each build could have a different name due to the hashes, I don't know how to do it.
How could I achieve this?
Maybe with a way to ignore the hashes for these two files (app.js and vendor.js) but I don't know how to do it.
This is the setup I was looking for:
...
.webpackConfig({
output: {
filename: '[name].js',
chunkFilename: `[name].chunk.[contenthash:8].js`,
path: path.join(__dirname, 'public/dist'),
publicPath: '/dist/'
},
...
This is for my Laravel + Vue SPA app.
I have this Laravel Mix config file here:
const path = require('path');
const fs = require('fs-extra');
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
require('laravel-mix-bundle-analyzer');
function publishAssets() {
const publicDir = path.resolve(__dirname, './public');
if (mix.inProduction()) {
fs.removeSync(path.join(publicDir, 'dist'));
}
fs.copySync(path.join(publicDir, 'build', 'dist'), path.join(publicDir, 'dist'));
fs.removeSync(path.join(publicDir, 'build'));
}
mix.js('resources/js/app.js', 'public/dist/js')
.sass('resources/sass/app.scss', 'public/dist/css').options({
postCss: [tailwindcss('./tailwind.config.js')],
processCssUrls: false,
});
// alias the ~/resources folder
mix.webpackConfig({
plugins: [
// new BundleAnalyzerPlugin()
],
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'#': `${__dirname}/resources`,
'~': path.join(__dirname, './resources/js'),
ziggy: path.join(__dirname, './vendor/tightenco/ziggy/dist/js/route.js'),
},
},
output: {
chunkFilename: 'dist/js/[chunkhash].js',
path: mix.config.hmr ? '/' : path.resolve(__dirname, './public/build'),
},
});
mix.then(() => {
if (!mix.config.hmr) {
process.nextTick(() => publishAssets());
}
});
It works fine with npm run watch, but when I do npm run production, the CSS doesn't work. The site loads and works, but the CSS is missing.
Can anyone see what in my code is causing it?
Here's my spa.blade.php:
<link rel="stylesheet" href="{{ mix('dist/css/app.css') }}">
...
<script src="{{ mix('dist/js/app.js') }}"></script>
In the network tab of Chrome dev tools, the CSS file is 270kb in develop environment and 42kb in prod environment.
Something is getting translated wrong.
In my case, it cause by setting wrong property "purge" in tailwindcss config file.
When I ran "npm run hot" or "npm run dev", the website was fine.
But it broke when I ran "npm run prod".
It seems the dev mode ignore the property "purge".
I'm calling this solved for now because my site started working.
it was extremely difficult to navigate since I had 6 months of work on a dev branch, and it worked via npm run watch. When I merged into master, npm run production loaded incorrectly--the styles were half there and half missing.
The solution was to downgrade from tailwindcss#1.9 to tailwindcss#1.4.
Along my way, I read something about postcss or something not working with the --no-progress flag which is on npm run production.
A person could try removing that flag, but I already downgraded tailwind so I didn't try that.
I built a single page application (SPA) using Laravel 8 + Vue.js + InertiaJs. Everything is working fine in the development environment, but when I compile assets for production, it shows me a blank page, and there is no error in the console. All assets are loading correctly with a 200 code, and everything seems to be OK, but the Vue app is not mounting!
webpack.mix.js
const mix = require('laravel-mix');
require('laravel-mix-workbox');
mix.webpackConfig({
output: {
filename: '[name].js',
chunkFilename: 'js/[name].js',
}
}).js('resources/js/app.js', 'public/js')
.extract(['vue'])
.version();
Image1
Image2
Image3
try using the inertiajs webpack.mix.js provided by the pingCRM github:
const path = require('path')
const mix = require('laravel-mix')
const cssImport = require('postcss-import')
const cssNesting = require('postcss-nesting')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.js('resources/js/app.js', 'public/js')
.vue()
.postCss('resources/css/app.css', 'public/css', [
// prettier-ignore
cssImport(),
cssNesting(),
require('tailwindcss'),
])
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
.version()
.sourceMaps()
note you may have to follow the instructions for setting up tailwindcss which can be found here, only do this if you plan to use it otherwise remove the require('tailwindcss'), from the webpack file
you also may need to npm install --save-dev postcss-import and npm install --save-dev postcss-nesting the --save-dev flag will add it to your package.json file for future reference
I'm using Laravel 5.6 and I would like to add the vtk.js dependency.
I'm using the basic configuration of webpack included by laravel-mix. I'm creating my default app.js and don't want to change this behaviour. So vtk should be included in the app.js.
I also saw that we can add a custom webpack config like this
mix.webpackConfig({
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
]
}
});
But I realy don't know how to include the module.exports and module from the webpack of js in the mix of laravel...
You have to append the path your js file in your webpack
run npm dev
const path = require('path');
const webpack = require('webpack');
const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules;
mix.webpackConfig({
module: {
rules: [...vtkRules]
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
]
}
});
I'm not used to VTK, you have to import/configure everything else on your app.js, which is your entrypoint.
I'm using Laravel 5.6, Laravel Mix 2.0, and Bootstrap-Vue 2.0.0-rc.1.
Trying to find a way to configure Laravel Mix to include Bootstrap-Vue's CSS into my app.css file and prevent Bootstrap-Vue from including <style> tags into the page <head>.
I saw this note in the package docs but still not sure how to use this properly:
Note: requires webpack configuration to load css files (official guide)
Finally, found a solution - ExtractTextPlugin.
let mix = require('laravel-mix');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
mix.webpackConfig({
module: {
rules: [
{
test: /\.css$/,
loader: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
}
]
}
});
Reference: https://github.com/JeffreyWay/laravel-mix/issues/1589
Install:
npm i bootstrap-vue
npm install --save-dev style-loader css-loader
Use:
edit resources/js/app.js to:
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)
edit resources/sass/app.scss to:
Import the styles:
import '~bootstrap/dist/css/bootstrap.css'
import '~bootstrap-vue/dist/bootstrap-vue.css'
Make sure the app.js and app.css are included in the blade(view) that is acting as the container for your vue.
See: https://bootstrap-vue.js.org/docs/