Laravel-mix Webpack公共路径

Question

因此，我使用Laravel-Mix，并在Webpack中设置了代码拆分。我对我的Vue组件使用动态导入，如下所示。

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

因为我也在使用Babel，所以我从项目根目录下的.babelrc文件加载了语法动态导入插件。

这一切都运行得很好，并且Webpack在构建时正确地拆分了代码。然而，问题是，它将块放在公共根目录中，而不是放在public/js中

如果在我的webpack.mix.js中有..。

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

正确地将构建的文件放在/js目录中...then mix。

但是为了分块文件，如果我在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',
    },
});

还要注意的是，更改主js位置的方法是使用mix.js函数

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

Answer 2

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