This is a webpack config file intended for use with Laravel Mix.
Changes has been made to reflect a more structured filestructure with files being served from a ./dist
-folder, and source files will remain inside a ./src
-folder. Some changes has also been made to make browsersync work a bit more generic.
Assuming you're using the package.json
-file from this gist, remember to do the following:
npm install --save-dev laravel-mix
cp -r node_modules/laravel-mix/setup/webpack.mix.js ./
Laravel Mix no longer requires a user-maintained webpack.config.js
in your project's root folder. By using the scripts supplied in the package.json
, the compile process will use the supplied webpack config by Laravel Mix.
This is a simple example on how my file- and folder structure looks like in a Mix-project.
project
| .gitignore
| package.json
| webpack.mix.js
|
└─── dist
| └─── index.html
| |
| └─── css
| | └─── app.css
| |
| └─── js
| └─── app.js
|
└─── src
| └─── js
| | └─── app.js
| |
| └─── sass
| └─── app.scss
|
Webpack makes it a lot easier to, eg, load third-party JS-modules into a single JS-file. It also supports tree-shaking. It's faster than gulp and is way more configurable. Laravel Mix makes this easier and works out of the box. I needed an easy-to-deploy configuration that would work in any project, and Laravel Mix does this perfectly.
When using extract
, for example if you need to pull in jQuery and Bootstrap via NPM, Laravel Mix creates a manifest.js
and vendor.js
. So instead of src
'ing to jQuery.min.js
and bootstrap.min.js
, you'll need to link to manifest.js
and vendor.js
- in that order - to make it work. Also remember to add your own app.js
.
Like this:
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
Again, if you're using the scripts supplied in the package.json
-example in this gist, you have the following commands at hand:
npm run dev
: This is the typical quick compile while you're developing. It will compile all assets but no minification will take place.npm run watch
: If you want your files watched for changes, you'll want to use this one. As Mix can also ships with-, and can easily be configured to run browserSync.npm run hot
: Hot Reloading is like Watch. It will watch for changes inside your files, but it will keep the current state of the component in the browser.npm run production
: Everything is compiled and minified for production.
What if we need to use vue.config.js?
How could we do that?
If following this tutorial but my vue.config.js is not getting read.
Is there a way to add custom vue configuration to webpack mix?