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

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

Answer 2

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

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

另请注意，更改主js位置的laravel方式是使用mix.js函数

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

Laravel-mix Webpack Public Path

2 个答案: