|
1 |
| -# The Laravel Mix CLI |
| 1 | +# The Mix CLI |
2 | 2 |
|
3 |
| -In Laravel Mix v6 you'll find a new CLI that simplifies working with mix. Now building with mix can be as simple as `npx mix` and watching `npx mix watch`. This new CLI gives mix current and future flexibility to keep your scripts working. |
| 3 | +- [Compiling in a Local Environment](#compiling-in-a-local-environment) |
| 4 | + - [Watch Assets for Changes](#watch-assets-for-changes) |
| 5 | + - [Polling](#polling) |
| 6 | + - [Hot Module Replacement](#hot-module-replacement) |
| 7 | +- [Compiling for Production](#compiling-for-production) |
| 8 | + - [Customize the Mix Configuration Path](#customize-the-mix-configuration-path) |
| 9 | +- [Pass Options to Webpack-CLI](#pass-options-to-webpack-cli) |
| 10 | + |
4 | 11 |
|
5 |
| -The new CLI also offers a better experience and simplified output when building assets. Now after a finished build you'll get information on the built assets and their sizes. |
| 12 | +As part of Mix v6, you'll find a new CLI that simplifies your build scripts. |
6 | 13 |
|
7 |
| -## Building (in Development) |
| 14 | +### Compiling in a Local Environment |
8 | 15 |
|
9 |
| -To build assets for development you can run `npx mix` and Mix will read your mix config file, build, and bundle your assets. |
10 | 16 |
|
11 |
| -## Watching assets for changes |
| 17 | +To build assets for development, reach for the `npx mix` command. Mix will then read your `webpack.mix.js` configuration file, and compile your assets. |
12 | 18 |
|
13 |
| -Typically during development you want to make changes repeatedly and then update your files. However running `npx mix` over-and-over again would be time consuming and not as efficient if we did it for you when you changed your assets. This is precisely what the watch command does! When you update a file mix will automatically recompile that file and rebuild your bundle. You can run the watch command using `npx mix watch`. |
| 19 | +``` |
| 20 | +npx mix |
| 21 | +``` |
14 | 22 |
|
15 |
| -### Polling |
| 23 | +#### Watch Assets for Changes |
16 | 24 |
|
17 |
| -In certain situations webpack cannot automatically pick up changes (like when on an NFS volume inside virtualbox). If this is a problem you can pass the `--watch-options-poll` option directly to webpack-cli to turn on polling to work around this. To do so you run the mix CLI like so: `npx mix watch -- --watch-options-poll=1000` |
| 25 | +Particularly for larger projects, compilation can take a bit of time. For this reason, it's highly recommended that you instead leverage webpack's ability to watch your filesystem for changes. The `npx mix watch` command will handle this for you. Now, each time you update a file, Mix will automatically recompile the file and rebuild your bundle. |
18 | 26 |
|
19 |
| -### Hot Module Replacement |
| 27 | +``` |
| 28 | +npx mix watch |
| 29 | +``` |
20 | 30 |
|
21 |
| -Webpack offers something called hot module replacement. This gives supporting modules the ability to "live update" in certain situations . In fact this is what powers Vue's live updates when developing. If you want to watch your assets and have modules (like Vue components) automatically reflect your changes without a page load you can pass the `--hot` flag when watching like so: `npx mix watch --hot` |
| 31 | +#### Polling |
22 | 32 |
|
23 |
| -## Building for production |
| 33 | +In certain situations, webpack may not automatically detect changes. An example of this is when you're on an NFS volume inside virtualbox. If this is a problem, pass the `--watch-options-poll` option directly to webpack-cli to turn on manual polling. |
| 34 | + |
| 35 | + ``` |
| 36 | + npx mix watch -- --watch-options-poll=1000 |
| 37 | +``` |
24 | 38 |
|
25 |
| -When it comes time to build assets for production Mix will set the appropriate webpack options, minify your source code, and optionally version your assets based on your mix configuration file. To build assets for production you pass the `-p` flag to the Mix CLI and it'll take care of the rest. |
| 39 | +Of course, you can add this to a build script within your `package.json` file. |
26 | 40 |
|
27 |
| -`npx mix -p` |
| 41 | +#### Hot Module Replacement |
28 | 42 |
|
29 |
| -## Customizing the location of `webpack.mix.js` |
| 43 | +Hot module replacement is a webpack featured that gives supporting modules the ability to "live update" in certain situations. A live-update is when your application refreshes without requiring a page reload. In fact, this is what powers Vue's live updates when developing. To turn this feature on, include the `--hot` flag. |
30 | 44 |
|
31 |
| -You can customise the location of your `webpack.mix.js` file by using the `--mix-config` option. For example if you wanted to load your `webpack.mix.js` file from separte `build` directory you could write that like so: `npx mix --mix-config=build/webpack.mix.js -p` |
| 45 | +``` |
| 46 | +npx mix watch --hot |
| 47 | +``` |
32 | 48 |
|
33 |
| -## Passing arbitrary options to webpack |
| 49 | +### Compiling for Production |
34 | 50 |
|
35 |
| -You can end a call to mix with `--` and anything after that will be passed directly to webpack-cli. For example you can pass environment variables using webpack-cli's `--env` option, for example: `npx mix -- --env foo=bar` |
| 51 | +When it comes time to build your assets for a production environment, Mix will set the appropriate webpack options, minify your source code, and optionally version your assets based on your Mix configuration file (`webpack.mix.js`). To build assets for production, include the `--production` flag - or the alias `-p` - to the Mix CLI. Mix will take care of the rest! |
| 52 | + |
| 53 | +``` |
| 54 | +npx mix --production |
| 55 | +``` |
| 56 | + |
| 57 | +#### Customize the Mix Configuration Path |
| 58 | + |
| 59 | +You may customise the location of your `webpack.mix.js` file by using the `--mix-config` option. For example, if you wish to load your `webpack.mix.js` file from a nested `build` directory, here's how: |
| 60 | + |
| 61 | + ``` |
| 62 | + npx mix --mix-config=build/webpack.mix.js --production |
| 63 | +``` |
| 64 | + |
| 65 | +### Pass Options to Webpack-CLI |
| 66 | + |
| 67 | +If you end any `mix` call with two dashes (`--`), anything after it will be passed through to webpack-cli. For example, you can pass environment variables using webpack-cli's `--env` option: |
| 68 | + |
| 69 | +``` |
| 70 | +npx mix -- --env foo=bar |
| 71 | +``` |
0 commit comments