Laravel-mix Webpack 公共路径

Posted 2023-02-22

【中文标题】Laravel-mix Webpack 公共路径

【英文标题】：Laravel-mix Webpack Public Path

【发布时间】：2018-07-29 12:01:12

【问题描述】：

所以我使用 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 属性，所有块都放在公共根目录中。

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

【参考方案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')

【讨论】：

这行得通！但我不得不同时使用filename: 'js/[name].js' 和chunkFilename: 'js/chunks/[name].js，这样主app.js 和块都嵌套在js 目录下。如果您更新您的答案以反映我会接受它。 :)

当您的应用程序增长时，将所有块文件放在 public/js 下的问题不是一个好主意。您的主文件之类的 app.js 会在人群中消失。但如果你更喜欢这种方式，你可以这样做 output: chunkFilename: 'js/[name].js', 在这里阅读更多 https://webpack.js.org/configuration/output/

不，你没有理解我在评论什么。将块文件放在他们自己的目录中就可以了。但是，由于我为我的一些“主要”js 文件（如 app: './resources/assets/js/app.js'）定义 entry 而没有定义 filename: '[name].js' 主要应用程序文件最终位于公共根目录

【参考方案2】：

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

【讨论】：

这似乎改变了一些东西，但我似乎看不到构建的文件放在哪里？ public 这里是相对于项目根目录的，因为当我以这种方式设置文件时，文件没有放入 public/js。使用此方法时，混合清单文件也不会更新。

好吧，这似乎可行，但仅在以mix.js('resources/assets/js/app.js') 的方式定义资源时，据我所知，在使用.webpackConfig() 方法时它不起作用

是否可以仅对 prod 构建执行此操作（例如，对 prod 使用 cdn，而对本地 env 使用本地目录）