You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/faq.md
+37-50Lines changed: 37 additions & 50 deletions
Original file line number
Diff line number
Diff line change
@@ -2,76 +2,47 @@
2
2
3
3
### Does this tool require that I use Laravel?
4
4
5
-
No. It has a few optimizations for Laravel, but it can be used for any project.
6
-
7
-
### My code isn't being minified.
8
-
9
-
Minification will only be performed, when your `NODE_ENV` is set to _production_. Not only will this speed up your compilation time, but it's also unnecessary during development. Here's an example of running webpack for production.
It's highly recommended that you add the following NPM scripts to your `package.json` file. Please note that Laravel includes these out of the box.
5
+
No. It has awareness of Laravel, but it can be used for any project. Just be sure to explicitly set the path to your project's `public` or `dist` directory, like so:
### I'm using a VM, and webpack isn't picking up my file changes.
27
-
28
-
If you're running `npm run dev` through a VM, you may find that file changes are not picked up by webpack. If that's the case, there are two ways to resolve this:
11
+
This tells Mix the basic directory where all of your assets should be compiled to.
29
12
30
-
1. Configure webpack to **poll** the filesystem for changes _Note: Polling the filesystem is resource-intensive and will likely shorten battery life on the go._
31
-
2.**Forward** file change notifications to the VM by using something like [vagrant-fsnotify](https://github.com/adrienkohlbecker/vagrant-fsnotify). _Note, this is a [Vagrant](https://www.vagrantup.com)-only plugin._
13
+
### My code isn't being minified.
32
14
33
-
To **poll** the VM's filesystem, update your NPM script to use the `--watch-poll` flag, in addition to the `--watch` flag. Like this:
15
+
Minification will only be performed when your `NODE_ENV` is set to _production_. By default, this mode is set to development.
To **forward** file change notifications to the VM, simply install [vagrant-fsnotify](https://github.com/adrienkohlbecker/vagrant-fsnotify) on the host machine:
21
+
If you're ready to build for a production environment, add the `--production` flag, like so:
42
22
43
23
```bash
44
-
vagrant plugin install vagrant-fsnotify
24
+
npx mix --production
45
25
```
46
26
47
-
Now you may [configure](https://github.com/adrienkohlbecker/vagrant-fsnotify#basic-setup) vagrant to use the plugin. In [Homestead](https://laravel.com/docs/5.4/homestead), your `Homestead.yaml` file would look something like this:
48
-
49
-
```yaml
50
-
folders:
51
-
- map: /Users/jeffrey/Code/laravel
52
-
to: /home/vagrant/Code/laravel
53
-
options:
54
-
fsnotify: true
55
-
exclude:
56
-
- node_modules
57
-
- vendor
58
-
```
27
+
### I'm using a VM, and webpack isn't picking up my file changes.
59
28
60
-
Once your vagrant machine is started, simply run `vagrant fsnotify` on the host machine to forward all file changes to the VM. You may then run `npm run watch` inside the VM and have your changes automatically picked up.
29
+
If you're running `npx mix` through a VM, you may find that file changes are not picked up by webpack. If that's the case, consider configuring webpack to **poll** your filesystem for changes, like so:
61
30
62
-
If you're still having trouble, [see here for additional troubleshooting tips](https://webpack.github.io/docs/troubleshooting.html#webpack-doesn-t-recompile-on-change-while-watching).
31
+
```js
32
+
npx mix watch --poll
33
+
```
63
34
64
35
### Why is it saying that an image in my CSS file can't be found in `node_modules`?
65
36
66
-
Let's imagine that you have a relative path to an asset that doesn't exist in your `resources/assets/sass/app.scss` file.
37
+
Imagine that you have a relative path to an asset that doesn't exist in your `resources/sass/app.scss` file.
67
38
68
39
```css
69
40
body {
70
41
background: url('../img/example.jpg');
71
42
}
72
43
```
73
44
74
-
When referencing a relative path, always think in terms of the current file. As such, webpack will look for `resources/assets/img/example.jpg`. If it can't find it, it'll then begin searching for the file location, including within `node_modules`. If it still can't be found, you'll receive the error:
45
+
When referencing a relative path, always think in terms of the current file. As such, webpack will look one level up for `resources/assets/img/example.jpg`. If it can't find it, it'll then begin searching for the file location, including within the massive `node_modules` directory. If it still can't be found, you'll receive the error:
75
46
76
47
```
77
48
ERROR Failed to compile with 1 errors
@@ -95,11 +66,11 @@ This is particularly useful for legacy projects where your folder structure is a
95
66
96
67
### My mix-manifest.json file shouldn't be in the project root.
97
68
98
-
If you're not using Laravel, your `mix-manifest.json` file will be dumped into the project root. If you need to change this, call `mix.setPublicPath('dist/');`, and your manifest file will now be saved in that base directory.
69
+
If you're not using Laravel, your `mix-manifest.json` file will be dumped into the project root. If you need to change this, call `mix.setPublicPath('dist/');`, and your manifest file will now correctly be saved to the `dist` directory.
99
70
100
-
### How Do I autoload modules with webpack?
71
+
### Can I autoload modules with Mix and webpack?
101
72
102
-
Through its `ProvidePlugin` plugin, webpack allows you to automatically load modules, where needed. A common use-case for this is when we need to pull in jQuery.
73
+
Yes. Through its `ProvidePlugin` plugin, webpack allows for this very functionality. A common use-case for this is when we need jQuery to be available to all of your modules. Here's a webpack-specific example of how you might accomplish this.
103
74
104
75
```js
105
76
newwebpack.ProvidePlugin({
@@ -113,7 +84,7 @@ jQuery('#item'); // <= just works
113
84
// $ is automatically set to the exports of module "jquery"
114
85
```
115
86
116
-
While Laravel Mix automatically loads jQuery for you (exactly as the example above demonstrates), should you need to disable it (by passing an empty object), or override it with your own modules, you may use the `mix.autoload()` method. Here's an example:
87
+
Of course, Mix provides an API on top of webpack to make this sort of autoloading a cinch.
117
88
118
89
```js
119
90
mix.autoload({
@@ -122,6 +93,8 @@ mix.autoload({
122
93
});
123
94
```
124
95
96
+
Above, we're effectively saying, "When webpack comes across the `$` or `window.jQuery` or `jQuery` symbols, replace it with the exported jQuery module."
97
+
125
98
### Why am I seeing a "Vue packages version mismatch" error?
126
99
127
100
If, upon updating your dependencies, your compile fails with the message:
@@ -135,7 +108,7 @@ Vue packages version mismatch:
This means your `vue` and `vue-template-compiler` dependencies are out of sync. Per Vue's instructions, the version number for both of these dependencies must be identical. Update as needed to fix the problem:
111
+
This means your `vue` and `vue-template-compiler` dependencies are out of sync. Per Vue 2's instructions, the version number for both of these dependencies must be identical. Update as needed to fix the problem:
Unfortunately, there are countless reasons why your dependencies may not be installing properly. A common root relates to an ancient version of Node (`node -v`) and npm (`npm -v`) installed. As a first step, visit http://nodejs.org and update those.
124
+
125
+
Otherwise, often, it's related to a faulty lock file that needs to be deleted. Give this series of commands a try to install everything from scratch:
Though Laravel Mix is optimized for Laravel usage, it may be used for any type of application.
3
+
Though Laravel Mix was originally built for Laravel projects, it of course may be used for any type of application.
4
4
5
-
### Laravel Project
5
+
### Stand-Alone Projects
6
6
7
-
Laravel ships with everything you need to get started. Simply:
8
-
9
-
- Install Laravel
10
-
- Run `npm install`
11
-
- Visit your `webpack.mix.js file`, and get started!
12
-
13
-
Now, from the command line, you may run `npm run watch` to watch your files for changes, and then recompile.
14
-
15
-
> Note: You won't find a `webpack.config.js` file in your project root. By default, Laravel defers to the config file from this repo. However, should you need to configure it, you may copy the file to your project root, and then update your `package.json` NPM scripts accordingly: `cp node_modules/laravel-mix/setup/webpack.config.js ./`.
16
-
17
-
### Stand-Alone Project
18
-
19
-
Begin by installing Laravel Mix through NPM or Yarn, and then copying the example Mix file to your project root.
7
+
Begin by installing Laravel Mix through NPM or Yarn.
Take note of the source paths. You're free to amend the paths to match your preferred structure, but if you're happy with our defaults simply run `mkdir src && touch src/app.{js,scss}` to create the files/directories. You're all set now. Compile everything down by running `node_modules/.bin/webpack` from the command line. You should now see:
39
+
At its core, Mix is an opinionated, fluent API on top of webpack. In the example above, we've instructed Mix to compile `src/app.js` and save it to the `dist/` directory. If you're working along, create `src/app.js` now, and populate it with a simple alert:
47
40
48
-
-`dist/app.css`
49
-
-`dist/app.js`
50
-
-`dist/mix-manifest.json` (Your asset dump file, which we'll discuss later.)
41
+
```js
42
+
// src/app.js
43
+
alert('hello world');
44
+
```
51
45
52
-
Nice job! Now get to work on that project.
46
+
Of course this is only a placeholder. We're now ready to compile. Mix provides a command-line program called `mix` which triggers the necessary webpack build. Give it a run now.
53
47
54
-
#### NPM Scripts
48
+
```
49
+
npx mix
50
+
```
55
51
56
-
As a tip, consider adding the following NPM scripts to your `package.json`file, to speed up your workflow. Laravel installs will already include this.
52
+
Congrats! You've created your first bundle. Create an HTML file, load your script, and you'll see an alert when the page loads.
0 commit comments