Laravel-mix Webpack公共路径 [英] Laravel-mix Webpack Public Path

问题描述

因此，我正在使用Laravel-Mix并已在Webpack中设置了代码拆分.我正在为这样的Vue组件使用动态导入.

So I am using Laravel-Mix and have set up code splitting in Webpack. I am using a dynamic import for my Vue components like this.

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

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

Since I am also using Babel, I have the syntax-dynamic-import plugin loading from my .babelrc file in the project root.

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

This is all working fine, and Webpack is properly splitting the code on build. However, the problem is, it is putting the chunks in the public root rather than in public/js

如果在我的webpack.mix.js中，我愿意...

If in my webpack.mix.js I do...

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

...然后将混合正确地将生成的文件放置在/js 目录中.

...then the mix properly places the built file in the /js directory.

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

But in order to chunk the files, if in webpack.mix.js I do...

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

...无论我分配给publicPath属性如何，所有块均置于公共根目录中.

...all the chunks get put in the public root no matter what I assign to the publicPath property.

知道我在这里想念什么吗?

Any idea what am I missing here?

推荐答案

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

just change the chunk path in webpack.mix.js under your laravel root folder,

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

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

also note that the laravel way of changing main js location is using mix.js function

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

这篇关于Laravel-mix Webpack公共路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！