laravel mix is ??used to manage front-end tasks. It is a front-end task automation management tool that can use the workflow mode to execute the specified tasks in sequence; Mix provides a simple and smooth API, allowing developers to Define Webpack compilation tasks for Laravel applications to easily manage front-end resources.

The operating environment of this tutorial: Windows 7 system, Laravel 6 version, DELL G3 computer.

What is laravel mix? What is the use?

Laravel Mix is ??a front-end task automation management tool that uses the workflow model to execute specified tasks in sequence. Mix provides a simple and smooth API that allows you to define Webpack compilation tasks for your Laravel applications. Mix supports many common CSS and JavaScript preprocessors, and you can easily manage front-end resources with simple calls.

Default What is laravel mix used for? and folder structure

The default Sass What is laravel mix used for? is in resources/assets/sass/app.scss (the content of the What is laravel mix used for? is completely The same), and the default JS What is laravel mix used for? is in resources/assets/js/app.js (because the What is laravel mix used for? is exactly the same, so if you want to learn more about the infrastructure of Vue in 5.3, you can check Matt Stauffer wrote the front-end structure of 5.3 this post).

If you dig into the bootstrap What is laravel mix used for? referenced in app.js ( resources/assets/js/bootstrap.js ), you will see that we use Axios instead of Vue-Resource to set up X-CSRF-TOKEN (Vue-Resource will no longer work after 2016).

If you run npm run dev on the Mix project, you can see:

By default, we generate The location of the What is laravel mix used for?s is the same as Elixir: public/css/app.css and public/js/app.js.

Main Mix Methods

As you can see, you can easily use Mix with Sass and JS. Sass, obviously, runs a Sass What is laravel mix used for? and outputs it as CSS. Use JS methods to support ECMAScript 2015 syntax, compile .vue What is laravel mix used for?s, minify code for production, and perform other processing of JavaScript What is laravel mix used for?s.

You can also use the .less method to compile Less into CSS:

mix.less('resources/assets/less/app.less',?'public/css');

Use the combine method to combine What is laravel mix used for?s in Together:

mix.combine([
????'public/css/vendor/jquery-ui-one-thing.css',
????'public/css/vendor/jquery-ui-another-thing.css'
],?'public/css/vendor.css');

Copy What is laravel mix used for?s or directories with copy:

mix.copy('node_modules/jquery-ui/some-theme-thing.css',?'public/css/some-jquery-ui-theme-thing.css');
mix.copy('node_modules/jquery-ui/css',?'public/css/jquery-ui');

Unlike Elixir, Source Maps are turned off by default and can be used in webpack.mix Call the following method in .js to enable it:

mix.sourceMaps();

By default, Mix will notify you of the compilation results in the form of system notifications. If you do not want them to run, you can use disableNotifications() Method disabled.

Mix.manifest.json and cache clearing

Those familiar with Elixir may notice that the output image above is a little different from Elixir: Mix is ??generating an out-of-the-box manifest What is laravel mix used for? public/mix-manifest.json. Of course, Elixir also generates the manifest What is laravel mix used for?: public/build/rev-manifest.json, and unlike Mix's direct production, it only generates it when it determines that the cache clearing (versioning) feature is enabled.

These manifest What is laravel mix used for?s are used to map front-end What is laravel mix used for?s to versioned copies of front-end What is laravel mix used for?s, for example: /js/app.js and /js/app-86ff5d31a2. Mapping between js. With this What is laravel mix used for?, you can use a simple reference in HTLM to point to the referenced versioned What is laravel mix used for?. For example <script src="%7B%7B%20mix('js/app.js')%20%7D%7D"></script> .

Unlike Elixir, even if you don't use cache clearing, Mix will generate this What is laravel mix used for?, but it is just a guide map:

{
??"/js/app.js":?"/js/app.js",
??"/css/app.css":?"/css/app.css"
}

For users who have used Elixir before, another An interesting change: your build What is laravel mix used for?s now end up in the normal output directory, rather than a separate build directory, so your versioned JS What is laravel mix used for?s will appear in public/js/app-86ff5d31a2.js .

To enable cache busting in Mix, just append .version() to the Mix What is laravel mix used for?:

mix.js('resources/assets/js/app.js',?'public/js')
????.sass('resources/assets/sass/app.scss',?'public/css')
????.version();

This is much simpler than passing the actual What is laravel mix used for?name, Just like in Elixir.

mix() Help

As mentioned above, you want to use mix() instead of elixir() to reference your resources, which works exactly the same way. But there is one thing. If you use Mix, you need to delete these default reference lines in the Laravel template:

<link>
...
<script></script>

Replace them in the following way:

<link>
...
<script></script>

Remember, this function is only in ## Find the string in #mix-manifest.json and return the mapped build What is laravel mix used for?. Used to ensure that when you clear the cache, it knows how to load the default What is laravel mix used for?.

代碼拆分

Webpack 是對許多人來說很令人興奮的部分，因為它提供了使代碼結構化的智能能力。我還沒能完全弄明白 webpack 的所有功能，Mix 也沒把所有功能都打包支持，例如：tree-shaking。但它確實使你的自定義代碼（它可能會經(jīng)常更改）與你的供應商代碼（這不應該）區(qū)分，使得用戶在每次推送新版本時刷新所有供應商代碼的可能性更小。

要利用這個特性，你需要使用 extract() 函數(shù)，它將你定義一個給定的庫或者模塊集合提取到一個單獨的構建文件名為 vendor.js：

mix.js('resources/assets/js/app.js',?'public/js')
????.extract(['vue',?'jquery']);

在這種情況下，Mix 生成了三個文件：public/js/app.js 、public/js/vendor.js ?和第三個 Webpack 特定文件 public/js/manifest.js。 為了運行順利，得按照以下的順序引入這三個文件：

<script></script>
<script></script>
<script></script>

如果清除了緩存，并且更改了應用自定義的代碼， vendor.js ?文件仍會緩存，也只有應用自定義的代碼才會被清除緩存，這樣你的網(wǎng)站會加載得更快。

自定義 Webpack 配置

如果你有興趣添加自己的自定義 Webpack 配置，只需要傳遞你的 Webpack 配置：

mix.webpackConfig({
????resolve:?{
????????modules:?[
????????????path.resolve(__dirname,?'vendor/laravel/spark/resources/assets/js')
????????]
????}
});

（上面這個例子只是從文檔復制粘貼來的~ 你真的有興趣就自己去了解哈~）

順便一提

說點有趣的東西吧，我想這或許能在 Webpack 文件中加點什么。 如果你想只在生產(chǎn)環(huán)境下復制點什么，你怎么會這樣做？

會這么問是因為我發(fā)現(xiàn)在 Node 環(huán)境對象中，我們可以用 process.env 去訪問?？梢詸z查任何值，包括系統(tǒng)上的任何全局環(huán)境變量。這個發(fā)現(xiàn)可能可以讓我們?nèi)プ鳇c其他有趣的事情，比如說有條件地檢查 process.env.NODE_ENV ?中的值：

if?(process.env.NODE_ENV?==?'production')?{
????mix.webpackConfig({?...?});
}

但是在閱讀源代碼后，我發(fā)現(xiàn) NODE_ENV 不是主要的檢查。相反，是用了一個帶有 inProduction ?標志的配置對象去做這件事情。 這個文檔里沒有寫，因此請謹慎使用，但你可以更新 Webpack 文件頂部的導入，然后使用該配置對象：

const?{?mix,?config?}?=?require('laravel-mix');

if?(config.inProduction)?{
????mix.webpackConfig({?...?});????
}

默認依賴關系

你可以查看 package.json ?并查看每個項目包含的依賴項列表。 記住，這些是由默認的 app.js 和 bootstrap.js ?來引用的，你可以刪除 app.js ?和 package.json ?中的引用，并重新運行 npm install ，當然刪除引用并不會刪除源文件。

• Axios（一個簡單且漂亮的 HTTP 客戶端）

• Bootstrap Sass（由默認的 app.scss ?文件來引入 Bootstrap 樣式）

• jQuery

• Lodash（ 比 Underscore 更好）

• Vue 2

小結

Laravel Mix 是一個代替 Laravel Elixir 的構建工具。 具有與 Elixir 幾乎相同的API，卻是基于 Webpack 而不是 Gulp。? ? ? ? ? ? ?

【相關推薦：laravel視頻教程】

The above is the detailed content of What is laravel mix used for?. For more information, please follow other related articles on the PHP Chinese website!