webpack - Laravel mix.extract(['vue']) “忘记” app.js

Question

我创建了以下配置：

const mix = require ('laravel-mix');
const glob = require ('glob')
const path = require ('path')
const CleanWebpackPlugin = require ('clean-webpack-plugin')

/*
 |--------------------------------------------------------------------------
 | Mix config
 |--------------------------------------------------------------------------
 */

mix.options ({
    postCss: [require ('autoprefixer')]
});

/*
 |--------------------------------------------------------------------------
 | Webpack config
 |--------------------------------------------------------------------------
 */

mix.webpackConfig ({
    output: {
        chunkFilename: 'chunks/[name].[chunkhash].js'
    },
    plugins: [
        new CleanWebpackPlugin ({
            cleanOnceBeforeBuildPatterns: ['chunks/**/*']
        }),
    ],
    module: {
        rules: [{
            test: /node_modules(?:\/|\\).+\.js$/,
            loader: 'babel-loader',
            include: [
                path.join (__dirname, 'node_modules/vue-echarts'),
                path.join (__dirname, 'node_modules/resize-detector'),
                path.join (__dirname, 'node_modules/vue-masonry')
            ]
        }]
    },
    resolve: {
        alias: {
            '@': path.join (__dirname, 'resources/assets/src'),
            'node_modules': path.join (__dirname, 'node_modules')
        }
    },
})

/*
 |--------------------------------------------------------------------------
 | Vendor assets
 |--------------------------------------------------------------------------
 */

function mixAssetsDir (query, cb) {
    (glob.sync ('resources/assets/' + query) || []).forEach (f => {
        f = f.replace (/[\\\/]+/g, '/');
    cb (f, f.replace ('resources/assets', 'public'));
});
}

const sassOptions = {
    precision: 5,
    implementation: () => require ('node-sass')
};

// Core javascripts
mixAssetsDir ('vendor/js/**/*.js', (src, dest) => mix.scripts (src, dest));

// Fonts
mixAssetsDir ('vendor/fonts/*.css', (src, dest) => mix.copy (src, dest));
mixAssetsDir ('vendor/fonts/*/*', (src, dest) => mix.copy (src, dest));

/*
 |--------------------------------------------------------------------------
 | Entry point
 |--------------------------------------------------------------------------
 */

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

if (Mix.isUsing ('hmr')) {
    mix.disableNotifications ();
} else {
    mix.version ();
}

如果我现在添加：

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

app.js不是存储在中，而是public作为块存储在chunks. 这使得它无法使用

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

或者

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

没有找到app.js，因为它是版本化的（请参阅mix-manifest.json）：

"/chunks//app.bcac72b900935193b194.js": "/chunks//app.bcac72b900935193b194.js?id=37f4d5877ebeaf16f640",

标签： webpacklaravel-mix