The power of webpack, distilled for the rest of us.
MIT License
This release brings Laravel Mix current with webpack 5. It additionally includes a variety of bug fixes and enhancements.
Published by JeffreyWay about 4 years ago
Published by JeffreyWay over 4 years ago
Add webpack 5 support.
Published by JeffreyWay about 5 years ago
Published by JeffreyWay almost 6 years ago
npm remove laravel-mix
npm install [email protected]
After upgrading, if you encounter any vue-template-compiler
issues, this is related to the fact that your installed version numbers of vue
and vue-template-compiler
must be identical. Update one or both to fix this issue.
npm install
s.mix.extract()
with zero arguments, all vendor dependencies (any package from node_modules/
that you pull in) will automatically be extracted. Nifty!mix.sass()
call, if desired. 88690a2f770c071dc8160127c42a4f44decf2b56npm install
s. 320cecbdb77e222e32903219905d0d8f3754c5ff.babelrc
file in your project root. 83f5052eb32c498a90edace47402d66eaf80f4b7npm audit
alerts have been fixed, thanks to the upgrade to webpack 4.node-sass
and sass-loader
dependencies were included out of the box, regardless of whether your project required Sass compilation or not. To help improve install times, these two dependencies will now be installed on-demand if, and only if, your project specifies Sass compilation with mix.sass()
. The first time you run npm run dev
, the dependencies will be installed and saved to your dev-dependencies list. 5b7a438bcf53bc87ccc08da09b1e816a6088dec8Important: As part of the vue-loader 15 updates, if your code uses the CommonJS syntax for importing EcmaScript modules, you'll need to append .default
, like so:
Vue.component('example-component', require('./components/ExampleComponent.vue'));
// Option 1: Add .default
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
// Option 2 (Recommended): Switch to EcmaScript imports.
import ExampleComponent from './components/ExampleComponent.vue';
Vue.component('example-component', ExampleComponent);
Important: Now that Mix has been updated to support Babel 7, you may need to address a few Babel-specific breaking changes. If your project pulls in extra Babel plugins that Mix does not provide out of the box, you'll need to update your local dependencies.
package.json
file, change all occurrences of "babel-plugin-[name]": "6.x"
to "@babel/plugin-[name]": "7.x"
.babelrc
file in your project, update all plugin name references. For example, update "plugins": ["babel-plugin-transform-object-rest-spread"]
to "plugins": ["@babel/plugin-proposal-object-rest-spread"]
As part of our switch from node-sass
to dart-sass
, though support is largely identical, you may notice changes or warnings upon compilation. You may either address these one-by-one, or you can manually switch back to node-sass, like so:
npm install node-sass
mix.sass('resources/sass/app.sass', 'public/css', {
implementation: require('node-sass')
});
mix.fastSass()
and mix.standaloneSass()
(aliases) have been removed entirely. In an effort to improve performance for those who only need to compile CSS, this command provided Sass compilation that was separate from the core webpack build. However, it seems to be more confusing than helpful to newcomers. Migrate by switching from mix.fastSass()
to mix.sass()
. 3e478043f7d6cfc73442b2971727d8595b6a559f
mix.fastSass('resources/sass/app.scss', 'public/css');
mix.sass('resources/sass/app.scss', 'public/css');
.mix
Property RemovedThe deprecated mix
property has now been removed. If you have require('laravel-mix').mix
in your webpack.mix.js
file, change it to require('laravel-mix')
. 7dc010451870c0b23d8e22fe5d0fa67714d7df5f
let mix = require('laravel-mix').mix;
let mix = require('laravel-mix');
Due to the mandatory switch from Uglify to Terser, if your project was overriding our default config with Config.uglify = {}
, you'll need to switch to Config.terser = {}
. The options API is largely the same.
// webpack.mix.js
mix.options({
uglify: {
uglifyOptions: {
warnings: true
}
}
});
mix.options({
terser: {
terserOptions: {
warnings: true
}
}
});
If your project does not include a mix.sass()
call (which automatically downloads all necessary dependencies), but does specify lang="sass"
in your Vue components, you may need to install either node-sass
or sass
. Because Mix doesn't know which preprocessors you specify in your Vue components, you'll need to manually pull them in. Fix it with npm install node-sass sass-loader
or npm install sass sass-loader
. Please note that the same is true for Less and Stylus.
Published by JeffreyWay almost 6 years ago
npm install laravel-mix@beta
Published by JeffreyWay almost 6 years ago
Babel 7 support! As this new version of Babel includes major breaking changes, Mix, too, needs to bump from v2 to v3. We've taken care of most the changes, however, if your project pulls in extra Babel plugins that Mix does not provide out of the box, you'll need to update locally as well.
package.json
file, change all occurrences of "babel-plugin-[name]": "6.x"
to "@babel/plugin-[name]": "7.x"
.babelrc
file in your project, update all plugin name references. For example, update "plugins": ["babel-plugin-transform-object-rest-spread"]
to "plugins": ["@babel/plugin-proposal-object-rest-spread"]
Next up, we'll be upgrading the Mix codebase to webpack 4. Stay tuned.
Published by JeffreyWay over 6 years ago
mix.extend()
) to extend its functionality to plugin authors. (Think: npm install laravel-mix-my-extension
)mix.coffee()
to install the necessary dependencies and compile your .coffee
files.Published by JeffreyWay over 6 years ago
mix.babelConfig()
to main API. (Now you don't have to create a .babelrc
file to add a single plugin or two.)mix.webpackConfig()
calls..env
MIX_
config available to webpack.mix.js
.mix.js()
. (mix.js('src/*.js', 'dist'
).vue-loader
configuration.Published by laracasts almost 7 years ago
drop_console
config option.Published by JeffreyWay almost 7 years ago
mix.preact()
.mix.webpackConfig()
now can accept a callback function.extractVueStyles
accepts a string path.Published by JeffreyWay about 7 years ago
transform-object-rest-spread
Babel plugin is now enabled by default.esModule
option is now configurable.file-loader
output directories are now configurable.dd()
function.Published by JeffreyWay about 7 years ago
vue-loader
dependency to 13.0.5.Published by JeffreyWay about 7 years ago
vue-template-compiler
version.node-sass
path for standalone Sass compilation.Published by JeffreyWay about 7 years ago
mix.postCss()
.Published by JeffreyWay over 7 years ago
mix.version()
to version all nested files.mix.version('path/to/folder');
mix.combine()
, mix.scripts()
, and mix.styles()
may now also accept a folder path.mix.scripts('public/js/vendor', 'public/combined.js'); // combine all files in this dir
mix.scripts('public/assets/*.js', 'public/combined.js') // combine all JS files in this dir
--watch-poll
command line option.mix.fastSass()
.Published by JeffreyWay over 7 years ago
Mix.combine()
now provides better feedback if the output path is omitted.Mix.babel()
no longer hardcodes the Babel config. It instead reads from Mix's config (or yours, if you provide one).Published by JeffreyWay over 7 years ago
mix.copy()
assets for changes.Published by JeffreyWay over 7 years ago