Skip to content

Commit 00d635c

Browse files
JeffreyWayJeffreyWay
committed
Docs
1 parent c22718f commit 00d635c

File tree

5 files changed

+162
-99
lines changed

5 files changed

+162
-99
lines changed

‎docs/api.md

+65
Original file line numberDiff line numberDiff line change
@@ -132,3 +132,68 @@ Monitor files for changes and update the browser without requiring a manual page
132132
```js
133133
mix.js('...').browserSync('your-domain.test');
134134
```
135+
136+
### `.setPublicPath(path)`
137+
138+
Set the path to where all public assets should be compiled to. For non-Laravel projects, always include a call to this method.
139+
140+
```js
141+
mix.setPublicPath('dist');
142+
```
143+
144+
### `.webpackConfig(config)`
145+
146+
Merge a webpack configuration object with the one Mix has generated. This can be useful when you want to drop down a level and manipulate the webpack configuration directly.
147+
148+
```js
149+
mix.webpackConfig({
150+
plugins: [new SomeWebpackPlugin()]
151+
});
152+
```
153+
154+
### `.override(fn(webpackConfig))`
155+
156+
Register a handler for _after_ the webpack configuration has been fully constructed. This is your last chance to override Mix's configuration before the compiling begins.
157+
158+
```js
159+
mix.override(webpackConfig => {
160+
webpackConfig.module.rules.push({
161+
test: /\.extension$/,
162+
use: []
163+
});
164+
});
165+
```
166+
167+
### `.dump()`
168+
169+
Log the generated webpack configuration to the console. This is temporary command that may be useful for debugging purposes.
170+
171+
```js
172+
mix.dump();
173+
```
174+
175+
### `.autoload(libraries)`
176+
177+
Make a module available as a variable in every other module required by webpack. If you're working with a particular plugin or library that depends upon a global variable, such as jQuery, this command may prove useful.
178+
179+
```js
180+
mix.autoload({
181+
jquery: ['$', 'window.jQuery']
182+
});
183+
```
184+
185+
### `.options(options)`
186+
187+
Merge and override Mix's default configuration settings. Refer to this package's `src/Config.js` file for a full list of settings that can be overridden.
188+
189+
Below is a brief list of the most common overrides.
190+
191+
```js
192+
mix.options({
193+
processCssUrls: false,
194+
postCss: [],
195+
terser: {},
196+
autoprefixer: {},
197+
cssName: {}
198+
});
199+
```

‎docs/mixjs.md

+18-97
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,43 @@
11
# JavaScript
22

3-
```js
4-
mix.js(src | [src], output);
5-
```
6-
7-
With a single line of code, Laravel Mix allows you to trigger a number of vital actions.
3+
- [Basic Usage](#basic-usage)
4+
- [TypeScript Support](#typescript-support)
85

9-
- ES2017 + modules compilation
10-
- Build and compile `.vue` components \(via `vue-loader`\)
11-
- Hot module replacement
12-
- Tree-shaking, new in webpack 2 \(removes unused library code\)
13-
- Extract vendor libraries \(via `mix.extract()`\), for improved long-term caching
14-
- Automatic versioning \(query string hash\), via `mix.version()`
15-
16-
### Usage
6+
### Basic Usage
177

188
```js
19-
let mix = require('laravel-mix');
20-
21-
// 1. A single src and output path.
229
mix.js('src/app.js', 'dist/app.js');
23-
24-
// 2. For additional src files that should be
25-
// bundled together:
26-
mix.js(['src/app.js', 'src/another.js'], 'dist/app.js');
27-
28-
// 3. For multiple entry/output points:
29-
mix.js('src/app.js', 'dist/').js('src/forum.js', 'dist/');
30-
```
31-
32-
### Laravel Example
33-
34-
Consider a typical Laravel install. By default, your JavaScript entry point will be located at `./resources/assets/js/app.js`. Let's prepare a `webpack.mix.js` file to compile that to `./public/js/app.js`.
35-
36-
```js
37-
let mix = require('laravel-mix');
38-
39-
mix.js('resources/assets/js/app.js', 'public/js');
40-
```
41-
42-
Done! Now, all of the bullet items above are available to you, and it required exactly one method call.
43-
44-
To trigger the compilation, run `npm run dev` from the command line.
45-
46-
### Vue Components
47-
48-
Laravel Mix is mildly opinionated, and ships with compilation support for `.vue` component files. Don't worry: if you don't use Vue, you can ignore this entire section.
49-
50-
Single file components are one of Vue's neatest features. One file to declare the template, script, and styling for a component? Yes, please! Let's try it out.
51-
52-
##### ./resources/assets/js/app.js
53-
54-
```js
55-
import Vue from 'vue';
56-
import Notification from './components/Notification.vue';
57-
58-
new Vue({
59-
el: '#app',
60-
components: { Notification }
61-
});
62-
```
63-
64-
Above, we import Vue \(you'll want to first run `npm install vue --save-dev`\), require a `Notification` Vue component, and then build up our root Vue instance.
65-
66-
**./resources/assets/js/components/Notification.vue**
67-
68-
```js
69-
<template>
70-
<div class="notification">
71-
{{ body }}
72-
</div>
73-
</template>
74-
75-
<script>
76-
export default {
77-
data() {
78-
return {
79-
body: 'I am a notification.'
80-
}
81-
}
82-
}
83-
</script>
84-
85-
<style>
86-
.notification {
87-
background: grey;
88-
}
89-
</style>
9010
```
9111

92-
If you're familiar with Vue, this should all look very familiar, so we'll move on.
12+
With a single method call, Laravel Mix allows you to trigger a variety of powerful actions.
9313

94-
**./webpack.mix.js**
14+
- Compile the [latest JavaScript syntax](https://babeljs.io/docs/en/babel-preset-env).
15+
- Trigger hot module replacement (via the `npx mix watch --hot` command).
16+
- Enable tree-shaking (where supported) for smaller builds.
17+
- Automatically optimizate and minify, when building for production (`npx mix --production`).
9518

9619
```js
9720
let mix = require('laravel-mix');
9821

99-
mix.js('resources/assets/js/app.js', 'public/js');
100-
```
101-
102-
And that should do it! Run `npm run dev` to compile it all down. At this point, simply create an HTML file, import your `./js/app.js` bundle, and load the browser. Tada!
22+
// 1. Compile src/app.js to dist/app.js
23+
mix.js('src/app.js', 'dist');
10324

104-
### React Support
25+
// 2. Compile src/app.js to dist/foo.js
26+
mix.js('src/app.js', 'dist/foo.js');
10527

106-
Laravel Mix also ships with basic React support. Simply update your `mix.js()` call to `mix.react()`, and then use the exact same set of arguments. Behind the scenes, Mix will pull in and reference any necessary Babel plugins for React.
28+
// 3. Merge and compile multiple scripts to dist/app.js
29+
mix.js(['src/app.js', 'src/another.js'], 'dist/app.js');
10730

108-
```js
109-
mix.react('resources/assets/js/app.jsx', 'public/js/app.js');
31+
// 4. Compile src/app.js to dist/app.js and src/forum.js to dist/forum.js
32+
mix.js('src/app.js', 'dist/').js('src/forum.js', 'dist/');
11033
```
11134

112-
Of course, you'll still want to install React and ReactDOM through NPM, per usual, but everything else should be taken care of.
113-
11435
### Typescript Support
11536

11637
Laravel Mix also ships with basic Typescript support. Simply update your `mix.js()` call to `mix.ts()`, and then use the exact same set of arguments.
11738

11839
```js
119-
mix.ts('resources/assets/js/app.ts', 'public/js/app.js');
40+
mix.ts('src/app.js', 'dist');
12041
```
12142

122-
Of course, you'll still want to do the necessary tweeks like creating `tsconfig.json` file and installing [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), but everything else should be taken care of.
43+
Of course, you'll still want to handle any TypeScript-specific tweeks like creating a `tsconfig.json` file and installing [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), but everything else should be taken care of.

‎docs/readme.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,8 @@
99

1010
## Dig Deeper
1111

12-
- [JavaScript](mixjs.md)
12+
- [JavaScript Bundling](mixjs.md)
13+
- [Vue Support](vue.md)
1314
- [Library Code Splitting](extract.md)
1415
- [BrowserSync](browsersync.md)
1516
- [Hot Module Replacement](hot-module-replacement.md)

‎docs/vue.md

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# Vue
2+
3+
- [Basic Usage](#basic-usage)
4+
5+
Mix ships with support for both Vue 2 and Vue 3 single file components.
6+
7+
### Basic Usage
8+
9+
Support may be activated via the `mix.vue()` command, like so:
10+
11+
```js
12+
mix.js('src/app.js', 'dist').vue();
13+
```
14+
15+
Think of this as a way to request general JavaScript bundling, but _also_ support and awareness of Vue single file components.
16+
17+
The necessary webpack configuration for Vue differs slightly dependent on whether you're using Vue 2 or 3.
18+
Mix will do its best to automatically identify which version you have installed and proceed accordingly. However, you can also explicity set your desired Vue version.
19+
20+
```js
21+
mix.js('src/app.js', 'dist').vue({ version: 2 });
22+
```
23+
24+
Vue's single file components allow you to declare a template, script, and styling within a single file that has a `.vue` extension. Here's an example:
25+
26+
```vue
27+
// src/Alert.vue
28+
<template>
29+
<div class="alert" v-text="message"></div>
30+
</template>
31+
32+
<script>
33+
export default {
34+
data() {
35+
return {
36+
message: 'I am an alert.'
37+
};
38+
}
39+
};
40+
</script>
41+
42+
<style>
43+
.alert {
44+
background: red;
45+
}
46+
</style>
47+
```
48+
49+
If you're familiar with Vue, this should all look very familiar.
50+
51+
> Otherwise, consider working through the free [Learn Vue: Step By Step](https://laracasts.com/series/learn-vue-2-step-by-step) series at Laracasts.
52+
53+
Assuming your entry script imports this `alert` component...
54+
55+
```js
56+
// src/app.js
57+
58+
import Vue from 'vue';
59+
import Alert from './Alert.vue';
60+
61+
new Vue({
62+
el: '#app',
63+
components: { Alert }
64+
});
65+
```
66+
67+
...you can now compile your JavaScript while _also_ including support for Vue files, like so:
68+
69+
```js
70+
// webpack.mix.js
71+
72+
let mix = require('laravel-mix');
73+
74+
mix.js('src/app.js', 'public/js').vue();
75+
```
76+
77+
And that should do it! Run `npx mix` to compile it all down. At this point, the only remaining step is to of course create an HTML file, import the compiled `./js/app.js` script, and refresh the browser.

‎setup/webpack.mix.js

-1
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ mix.js('src/app.js', 'dist/').sass('src/app.scss', 'dist/');
4545
// mix.extend(name, handler) <-- Extend Mix's API with your own components.
4646
// mix.options({
4747
// processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
48-
// purifyCss: false, // Remove unused CSS selectors.
4948
// terser: {}, // Terser-specific options. https://github.com/webpack-contrib/terser-webpack-plugin#options
5049
// postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
5150
// });

0 commit comments

Comments
 (0)