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.