Working with JavaScript

Mix provides several features that facilitate working with JavaScript files, such as compiling ECMAScript 2015, module packaging, minimizing and merging native JavaScript files. Even better, all of this works great with no configuration required.

mix.js('resources/js/app.js', 'public/js');

With just this line of code, you can support:

Vendor extraction

Bind the application's own JavaScript and third-party libraries in There is a potential disadvantage: it makes long-term caching difficult. For example, a separate update to the application code will force the browser to re-download all third-party libraries, even if the third-party libraries have not changed.

If you plan to frequently update the JavaScript in your application, you should consider extracting the third-party library into its own file. This way, changes to the application code will not affect the vendor.js file cache. Mix's extract method provides convenience for this: The

mix.js('resources/js/app.js', 'public/js')  
 .extract(['vue'])

extract method accepts all libraries you want to extract to vendor.js or Array of modules as parameter. Using the code snippet from the example above, Mix will generate the following file:

To avoid JavaScript errors, make sure these files are loaded in the appropriate order:

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

React

Mix can automatically install the Babel plug-ins required for React support. To achieve this, just replace mix.js() with mix.react() :

mix.react('resources/js/app.jsx', 'public/js');

Mix will download in the background and include the applicable babel-preset-react Babel plugin.

Vanilla JS

is similar to integrating style sheets using mix.styles(), You can also consolidate and minify any number of JavaScript files using the scripts() method:

mix.scripts([   
 'public/js/admin.js',    
 'public/js/dashboard.js'],
 'public/js/all.js'
 );

This option is especially useful for legacy code that does not require JavaScript to be compiled using Webpack.

{tip} mix.babel() is a small variant of mix.scripts(). Its method signature is exactly the same as scripts; but the integrated files will be compiled by Babel, which converts the ES2015 code into vanilla JavaScript that the browser understands.

Custom Webpack Configuration

Lavarel Mix references a pre-configured webpack.config.js file behind the scenes to speed up startup and operation. Sometimes, you may need to edit this file manually. You may have a special loader or plugin you need to reference, or you may prefer to use Stylus instead of Sass. In this case, you have two options:

Merge custom configuration

Mix provides the webpackConfig method to merge any short Webpack Configure to overwrite existing configuration. This is a very attractive option because it doesn't require you to copy and maintain your own copy of webpack.config.js. The webpackConfig method accepts an object as a parameter, which contains any Webpack specific configuration you want to apply,

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

custom configuration file

If you want to fully customize the Webpack configuration, copy the node_modules/laravel-mix/setup/webpack.config.js file to the root directory of your project. Then point all --config references in the package.json file to the newly copied configuration file. If you choose to customize the configuration in this way, any subsequent updates to Mix webpack.config.js must be manually merged into your custom configuration file.

Copy files & directories

copy method can be used to copy files and directories to a new location. This method is useful when special resources in the node_modules directory need to be relocated to the public folder.

mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');

When copying a folder, the copy method will flatten the directory structure. If you want to maintain the original structure of the directory, you need to use the copyDirectory method:

mix.copyDirectory('resources/img', 'public/img');

version method. The .

version method automatically appends a unique hash value to all compiled file names, allowing for more convenient cache destruction:

mix.js('resources/js/app.js', 'public/js') 
  .version();

mix function in views to load the corresponding hash resource. mix The function automatically determines the current file name of the hash file:

<script src="{{ mix('/js/app.js') }}"></script>

npm run production Perform versioning:

mix.js('resources/js/app.js', 'public/js');
if (mix.inProduction()) {
    mix.version();
   }

mix.browserSync('my-domain.test');
// 或...
// https://browsersync.io/docs/options
mix.browserSync({
    proxy: 'my-domain.test'
  });

MIX_SENTRY_DSN_PUBLIC=http://example.com

process.env.MIX_SENTRY_DSN_PUBLIC

mix.disableNotifications();