Laravel-mix Webpack Public 路径

Question

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

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

由于我也在使用 Babel，因此我从项目根目录中的 .babelrc 文件中加载了语法动态导入插件。

一切正常，Webpack 在构建时正确地拆分了代码。然而，问题是，它将块放在 public 根而不是 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',
    }
});

...无论我分配给 public 路径属性什么，所有块都放在 public 根目录中。

知道我错过了什么吗？

Answer 1

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

Answer 2

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

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')

Laravel-mix Webpack Public 路径

Laravel-mix Webpack Public Path

laravel

webpack

vue.js

vuejs2

laravel-mix