Laravel-mix Webpack 公共路径

Question

所以我使用 Laravel-Mix 并在 Webpack 中设置了代码拆分。我正在为我的 Vue 组件使用动态导入。

Vue.component('UserMenu', () => import('./components/UserMenu.vue'));

由于我也在使用 Babel，因此我从项目根目录中的 .babelrc 文件中加载了 syntax-dynamic-import 插件。

一切正常，Webpack 在构建时正确拆分代码。但是，问题是，它将块放在公共根目录而不是public/js

如果在我的 webpack.mix.js 中我这样做...

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

...然后混合将构建文件正确放置在/js 目录中。

但是为了对文件进行分块，如果在 webpack.mix.js 中我会...

 mix.webpackConfig({
    entry: {
        app: './resources/assets/js/app.js',
    },
    output: {
        filename: '[name].js',
        publicPath: 'public/js',
    }
});

...无论我将什么分配给 publicPath 属性，所有块都放在公共根目录中。

知道我在这里缺少什么吗？

Answer 1

只需更改 laravel 根文件夹下 webpack.mix.js 中的块路径，

mix.webpackConfig({
    output: {
        filename:'js/main/[name].js',
        chunkFilename: 'js/chunks/[name].js',
    },
});

还要注意 laravel 改变主 js 位置的方式是使用 mix.js 函数

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

Answer 2

尝试使用mix.setPublicPath('public/build')方法设置公共路径。