Skip to content

Commit 83b32c1

Browse files
committed
Tweak doc
1 parent 9d31ccd commit 83b32c1

File tree

2 files changed

+55
-18
lines changed

2 files changed

+55
-18
lines changed

docs/cli.md

+54-18
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,71 @@
1-
# The Laravel Mix CLI
1+
# The Mix CLI
22

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+
411

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.
613

7-
## Building (in Development)
14+
### Compiling in a Local Environment
815

9-
To build assets for development you can run `npx mix` and Mix will read your mix config file, build, and bundle your assets.
1016

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.
1218

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+
```
1422

15-
### Polling
23+
#### Watch Assets for Changes
1624

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.
1826

19-
### Hot Module Replacement
27+
```
28+
npx mix watch
29+
```
2030

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
2232

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+
```
2438

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.
2640

27-
`npx mix -p`
41+
#### Hot Module Replacement
2842

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.
3044

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+
```
3248

33-
## Passing arbitrary options to webpack
49+
### Compiling for Production
3450

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+
```

docs/readme.md

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
- [Examples](examples.md)
88
- [Laravel Quick Start](workflow.md)
99
- [The Full Mix API](api.md)
10+
- [The Mix CLI](cli.md)
1011
- [FAQ](faq.md)
1112

1213
## Dig Deeper

0 commit comments

Comments
 (0)