Laravel Mix provides a fluent API for defining webpack build steps for your application using several common CSS and JavaScript pre-processors.

Laravel Mix提供了一种流畅的API，可使用几种常见CSS和JavaScript预处理程序为您的应用程序定义Webpack构建步骤。

That is the definition taken straight from the documentation . But what does it all mean?

这就是直接从 文档中 获得的定义。 但这意味着什么？

The lovely creators of Laravel Mix, put in the common webpack configurations and you can add more custom configurations if you wish.

Laravel Mix的可爱创造者加入了常见的Webpack配置，并且您可以根据需要添加更多自定义配置。

This is especially wonderful for people that want to use webpack, but feel like configuring webpack is too difficult. Or maybe they wanted to use ES2016 but saw some complicated article about loaders and modules.

对于想使用webpack的人来说，这尤其棒，但是感觉配置webpack太困难了。 或者，也许他们想使用ES2016，但看到了一些关于加载器和模块的复杂文章。

Laravel Mix allows you to use a single line to describe what you want and it'll use it's preconfigured settings to process it properly.

Laravel Mix允许您使用一行描述您想要的内容，并将使用它的预配置设置来正确处理它。

安装Laravel Mix ( Installing Laravel Mix )

与Laravel ( With Laravel )

If you're using Laravel 5.4 and above, then mix is already installed. All you have to do is run npm install .

如果您使用的是Laravel 5.4及更高版本，则说明已经安装了mix。 您所要做的就是运行 npm install 。

单机版 ( Standalone )

From the root of your application, run the following commands

在应用程序的根目录中，运行以下命令

npm init -y
npm install laravel-mix --save-dev
cp -r node_modules/laravel-mix/setup/webpack.mix.js ./

Now in the package.json file, add this.

现在在 package.json 文件中添加它。

"scripts": {
        "dev": "NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "production": "NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
 
Now the installation is complete.
 
 
 至此安装完成。 
 
 
 配置Laravel Mix ( Configuring Laravel Mix )
 
 
Most of our time will be spent in the webpack.mix.js file. In the file, you should see this.
 
 
 我们大部分时间都将花费在webpack.mix.js文件中。 在文件中，您应该看到此信息。 
 
 
let mix = require('laravel-mix');
     |--------------------------------------------------------------------------
     | Mix Asset Management
     |--------------------------------------------------------------------------
     | Mix provides a clean, fluent API for defining some Webpack build steps
     | for your Laravel application. By default, we are compiling the Sass
     | file for your application, as well as bundling up your JS files.
    mix.js('src/app.js', 'dist/')
       .sass('src/app.scss', 'dist/');
 
 
It is already preconfigured to compile a file at src/app.js to dist/app.js file and src/app.scss to dist/app.css.
 
 
 它已经预先配置为将src/app.js上的文件编译为dist/app.js文件，并将src/app.scss为dist/app.css 。 
 
 
There are several more Mix methods and you can see all of them in the default webpack.mix.js file.
 
 
 还有其他几种Mix方法，您可以在默认的webpack.mix.js文件中看到所有这些方法。 
 
 
// Full API
    // mix.js(src, output);
    // mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
    // mix.extract(vendorLibs);
    // mix.sass(src, output);
    // mix.standaloneSass('src', output); <-- Faster, but isolated from Webpack.
    // mix.fastSass('src', output); <-- Alias for mix.standaloneSass().
    // mix.less(src, output);
    // mix.stylus(src, output);
    // mix.postCss(src, output, [require('postcss-some-plugin')()]);
    // mix.browserSync('my-site.dev');
    // mix.combine(files, destination);
    // mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
    // mix.copy(from, to);
    // mix.copyDirectory(fromDir, toDir);
    // mix.minify(file);
    // mix.sourceMaps(); // Enable sourcemaps
    // mix.version(); // Enable versioning.
    // mix.disableNotifications();
    // mix.setPublicPath('path/to/public');
    // mix.setResourceRoot('prefix/for/resource/locators');
    // mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
    // mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
    // mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
    // mix.options({
    //   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
    //   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
    //   purifyCss: false, // Remove unused CSS selectors.
    //   uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
    //   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
    // });
 
 
The beauty of this is that we can chain as many of these as we want and not worry about the underlying webpack build.
 
 
 这样做的好处是，我们可以根据需要链接任意数量的链接，而不必担心底层的webpack构建。 
 
 
Supports SASS, LESS, Stylus, PostCSS, PlainCss and much more. And all you have to write is a single line.
 
 
 支持SASS，LESS，Stylus，PostCSS，PlainCss等。 您只需要写一行。 
 
 
 编译中 ( Compiling )
 
 
After configuring your app, there are several commands we can run.
 
 
 配置完您的应用程序后，我们可以运行几个命令。 
 
 
 npm run dev (npm run dev)
 
 
This builds our assets but does not minify or produce a production-ready build. 
 
 
 这将构建我们的资产，但不会减少或生成可用于生产的构建。 
 
 
 npm run手表 (npm run watch)
 
 
Similar to npm run dev but will watch for changes to our assets and automatically re-compile any changed asset
 
 
 与npm run dev类似，但将监视我们的资产更改并自动重新编译任何更改的资产 
 
 
 npm运行热 (npm run hot)
 
 
Will not just refresh the page when a piece of JavaScript is changed, but it will also maintain the current state of the component in the browser.
 
 
 当更改了一段JavaScript时，不仅会刷新页面，而且还会保持浏览器中组件的当前状态。 
 
 
 npm运行生产 (npm run production)
 
 
Will compile all our assets and produce a production-ready build. It will run all Mix tasks, and it will minify the output. 
 
 
 将编译我们所有的资产并生成可用于生产的版本。 它将运行所有Mix任务，并将输出最小化。 
 
 
 基本演示 ( Basic Demo )
 
 
Let's create a simple HTML "fictional" interface with some little CSS and JS. We want our folder structure to be something like this:
 
 
 让我们用一些小CSS和JS创建一个简单HTML“虚构”界面。 我们希望我们的文件夹结构是这样的： 
 
    |__public/ #webroot
    |    |__js/  #folder for JS files
    |    |__css/  #folder for CSS files
    |    |__media/  #folder for images and other files
    |__resorces/
    |    |__scripts/ #folder for our source JS files 
    |    |__styles/ #folder for our source SASS files 
    |__src/ #folder we want copied "as is" to the public directory.
    package.json
    webpack.mix.js

let mix = require('laravel-mix');
    mix .js('resources/scripts/app.js', 'public/js/app.js')
       .sass('resources/styles/app.scss', 'public/css/app.css')
       .copyDirectory('src', 'public');

So we will configure our webpack.mix.js this way.

因此，我们将以这种方式配置 webpack.mix.js 。

let mix = require('laravel-mix');
    mix .js('site1/scripts/app.js', 'public/site1/js/app.js')
    .sass('site1/styles/app.scss', 'public/site1/css/app.css')
    .copyDirectory('site1/src', 'public/site1')
    .js('site2/scripts/app.js', 'public/site2/js/app.js')
    .sass('site2/styles/app.scss', 'public/site2/css/app.css')
    .copyDirectory('site2/src', 'public/site2');

Since both of the sites are similar and have the same dependencies, then instead of having a separate setup for each of them, we can Laravel Mix to compile them to different folders which we can then set as separate web roots for their respective sites.

由于两个站点都是相似的并且具有相同的依赖关系，因此我们不必为每个站点进行单独的设置，而是可以将Laravel Mix编译为不同的文件夹，然后将其设置为各自站点的单独Web根。

Using this method prevents us from having two separate projects and having to install and maintain the same set of dependencies in both of them.

使用此方法可以防止我们拥有两个单独的项目，并且不必在两个项目中都安装和维护相同的依赖项集。

The structure is very similar to the first demo, but since Laravel Mix allows us to set the compile destination, we can easily compile to different folders which we will then use as the webroot.

该结构与第一个演示非常相似，但是由于Laravel Mix允许我们设置编译目标，因此我们可以轻松地编译到不同的文件夹，然后将其用作webroot。

We will put all the souce code for site1 in the folder app/site1/ , and site2 in app/site2/ . Inside these folders, we will have the scripts/ folder for the JavaScript files, and the styles/ folder for the SASS files. The src folder is for the files that we simply want copied to the webroot.

我们将把 site1 所有源代码放在 app/site1/ 文件夹中，并将 site2 放在 app/site2/ 文件夹中。 在这些文件夹中，我们将有JavaScript文件的 scripts/ 文件夹和SASS文件的 styles/ 文件夹。 src 文件夹用于我们只想复制到webroot的文件。

The webroot for the sites will be at public/site1/ and public/site2/ respectively.

这些站点的webroot分别位于 public/site1/ 和 public/site2/ 。

The source code is available here . In there, the names of the sites are Imperium and JustOfada. They are hosted here(imperium) and here(justofada) .

源代码可 在此处获得 。 在那里，这些站点的名称是Imperium和JustOfada。 他们托管 在这里（帝国） 和 这里（justofada） 。

高级Webpack ( Advanced Webpack )

Laravel Mix actually has a preconfigured webpack.config.js file that it references when it runs. If you need to add some custom config, you can pass your additional webpack configuration to the mix.webpackConfig() method.

Laravel Mix实际上有一个预配置的 webpack.config.js 文件，在运行时会引用该文件。 如果您需要添加一些自定义配置，则可以将其他Webpack配置传递给 mix.webpackConfig() 方法。

To completely customize your Webpack configuration, copy the node_modules/laravel-mix/setup/webpack.config.js file to your application's root directory. Then edit your package.json file, and point all of the --config references to the newly copied configuration file.

要完全自定义Webpack配置，请将 node_modules/laravel-mix/setup/webpack.config.js 文件复制到应用程序的根目录中。 然后编辑您的 package.json 文件，并将所有 --config 引用指向新复制的配置文件。

For example.

"scripts": {
        "dev": "NODE_ENV=development webpack --progress --hide-modules --config=webpack.config.js",
        "watch": "NODE_ENV=development webpack --watch --progress --hide-modules --config=webpack.config.js",
        "hot": "NODE_ENV=development webpack-dev-server --inline --hot --config=webpack.config.js",
        "production": "NODE_ENV=production webpack --progress --hide-modules --config=webpack.config.js"
 
 结论 ( Conclusion )
 
 
As you can see in the demos, Laravel Mix saves a lot of time. There is no more need to worry about webpack configurations. If you have not used webpack before, this is a great entry tool. However, if you have used it before, this helps to simplify the entire process.
 
 
 在演示中可以看到，Laravel Mix节省了大量时间。 无需担心Webpack配置。 如果您以前从未使用过webpack，那么这是一个很好的输入工具。 但是，如果您以前使用过它，则可以帮助简化整个过程。 
 
  
翻译自: https://scotch.io/tutorials/using-laravel-mix-with-webpack-for-all-your-assets
 
                    Laravel Mix provides a fluent API for defining webpack build steps for your application using several common CSS and JavaScript pre-processors. Laravel Mix提供了一种流畅的API，可使用几种常见CSS和JavaScript预处理程序为您的应用程...
Laravel Mix 提供了一套流式 API，使用一些通用的 CSS 和 JavaScript 预处理器为 Laravel 应用定义 Webpack 构建步骤。通过简单的方法链，你可以流式定义资源管道。例如：
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.sc...
				
在此之前需安装laravel-mix
laravel-mix 为开发者提供了非常便利的功能，通过webpack把所需的js 优雅的打包到js里。
今天测试一个，如何把一个npm仓库上的包导入项目中去使用。
随便找一个包：
https://www.npmjs.com/package/qt-dialog
根据里面的提示
npm install qt-dialog
安装成功后，在webpack.mix.js 导入这个拓展。
mix.extract(['qt-dialog']);
				
Laravel Mix 提供了定义 Webpack 构建步骤的 API，用于在应用中使用常见的 CSS 和 JavaScript 预处理器。通过链式调用这些简洁方法，可以流畅地定义资源管道。
当然，你不一定非要使用它来开发应用；
在安装 Mix 之前，要先确保机器上已经安装了 Node.js 和 NPM。
如果你不知道是否安装了可以查看一下版本：
node -v
npm -v
Larave...
				
文章目录安装插件修改 `webpack.mix.js`Enjoy it参考资料
Element-plus 是基于 Vue3 的响应式框架，在 Laravel 中使用 Laravel Mix 实现 Element-plus 的样式文件的自动导入，以此代替全局引入的方式，降低 CSS 文件的大小。
在项目根目录下执行指令
npm install -D unplugin-vue-components unplugin-auto-import
如果你使用的是 Laravel Sail 环境，别忘记在命
				
我们在使用laravel构建项目时，经常会把后台管理及前台放在同一个laravel项目中。
但是当这两个项目都需要用到laravel-mix构建时，我们希望通过运行不同的npm命令区分后台及前台。
考虑混合在一起的情况：
//webpack.mix.js
const { mix } = require('laravel-mix');
				
最近正好遇到一个需求，是前端那边要求我们要能够监控CSS和JS等前端资源文件内容改变，动态的给其添加版本号后缀，以解决浏览器缓存的问题。
因为我们的项目后端使用的是Laravel框架，所以就查了laravel框架有没有自带这个功能，翻看了官方文档，看到其提供了Mix这个功能，一下就是laravel框架使用Mix的流程
一、Mix安装【详细的安装流程大家可以看下官方文档】
1、安装node依赖【在运行 Mix 之前，要先确保您的机器上已经安装了Node和NPM】
npm install
2、运行Mix
				
Laravel Mix 是 Laravel 提供的一种简化 Webpack 配置的方式，它是一个基于 Webpack 的前端构建工具，提供了一些简单易用的 API，让开发者可以轻松地配置和使用 Webpack，并且不需要编写复杂的配置文件。使用 Laravel Mix，开发者可以通过简单的配置来编译和打包前端资源，如 JavaScript、CSS、图片等，同时还提供了一些实用的功能，如自动刷新、热加载、版本控制、文件压缩等。Laravel Mix 的设计理念是“零配置”，即默认情况下，它会根据项目的文件结构和代码风格自动推断出需要进行的编译任务和配置，从而大大降低了前端构建的复杂度和学习成本。