Working With JavaScript: Custom Webpack Configuration

Behind the scenes, Laravel Mix references a pre-configured webpack.config.js file to get you up and running as quickly as possible.

Merging Custom Configuration

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

Custom Configuration Files

  • If you would like to completely customize your Webpack configuration, copy the node_modules/laravel-mix/setup/webpack.config.js file to your project's root directory.
  • Next, point all of the --config references in your package.json file to the newly copied configuration file.
  • If you choose to take this approach to customization, any future upstream updates to Mix's webpack.config.js must be manually merged into your customized file.

Working With JavaScript: Custom Webpack Configuration — Structure map

Clickable & Draggable!

Working With JavaScript: Custom Webpack Configuration — Related pages: