如何通过Webpack在Laravel中引入Moment.js？

Hey there! I’ve run into this exact Moment.js issue with Laravel Mix (Laravel’s Webpack wrapper) before, so let’s break down how to fix both the undefined problem and the locale loading bug you mentioned.

First: Fix the "moment is undefined" Issue #

The main reason you’re seeing undefined is because Webpack wraps modules in a local scope by default—so even if you require Moment, it won’t be available globally on your page unless you explicitly expose it. Here’s how to fix that:

Update Your app.js Import #

Replace your current require('moment').default; line with one of these options:

Option 1: CommonJS (require) Syntax

// Import Moment
const moment = require('moment');
// Expose it to the global window object so your page can access it
window.moment = moment;

Option 2: ES Module (import) Syntax

import moment from 'moment';
// Expose globally
window.moment = moment;

You don’t need the .default suffix here—Moment’s CommonJS export doesn’t require it, and that’s probably part of why you were hitting issues.

Second: Fix the Locale Loading Known Issue #

The problem with Moment’s dynamic locale imports (the one referenced in that GitHub ticket) happens because Webpack can’t resolve the dynamic paths Moment uses under the hood. We can fix this with two steps:

Step 1: Add a Webpack Plugin to webpack.mix.js #

Open your project’s webpack.mix.js file and add the ContextReplacementPlugin to tell Webpack exactly which locales to bundle (this also reduces your bundle size by only including the locales you need):

const mix = require('laravel-mix');
const webpack = require('webpack');

// Keep your existing Mix config (like mix.js(), mix.sass(), etc.)
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

// Add this Webpack config block
mix.webpackConfig({
    plugins: [
        // Replace the regex inside /()/ with the locales you need (e.g., zh-cn, en, fr)
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /(zh-cn|en)/)
    ]
});

Step 2: Import & Set Your Default Locale #

Back in app.js, after importing Moment, add the locale you want and set it as the default:

// After importing Moment and exposing it to window...
require('moment/locale/zh-cn'); // Or your preferred locale
// Set default locale
moment.locale('zh-cn');

Final Steps to Test #

1. Make sure Moment is installed (run this if you haven’t already):

   npm install moment --save
   

2. Rebuild your assets:

   npm run dev # Or npm run prod for production
   

3. Refresh your page—you should now have a working global moment object with your chosen locale loaded.

That should resolve both the undefined error and the locale loading issue you were facing!

内容的提问来源于stack exchange，提问作者TS'