Laravel Mix和摩纳哥编辑

Question

让我们先说我对Webpack不是很精通，所以，这可能是一个微不足道的问题。

我正试图通过monaco-editor-webpack-plugin在Laravel项目中使用摩纳哥。由于插件需要对webpack.config.js进行修改，而Laravel使用webpack.mix.js，所以我通过摆弄，设法想出了以下配置：

/* eslint-disable import/no-extraneous-dependencies */
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
const mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel applications. By default, we are compiling the CSS
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/js/app.js', 'public/js')
.sass('resources/scss/app.scss', 'public/css')
.webpackConfig({
plugins: [
new MonacoWebpackPlugin({
languages: ['css', 'html', 'javascript', 'json', 'scss', 'typescript'],
}),
],
});

现在，一切都很好，文件得到编译，编辑器也按预期工作。我遇到的问题是编辑器的编译文件是在/public目录中生成的。例如：/public/editor.worker.js、/public/0.js等

我真的很想避免这种情况，而是用/public/js/vendor/monaco编译这些文件。我试图将output配置更改为/public/js/vendor/monaco，但它将所有内容(css、字体等(都编译到该目录中。

有没有办法说"；嘿，我想把摩纳哥的文件放在这里，而把其他的都留在这里&"；。

Answer 1

有一个内置的laravel混合函数copy可以提供帮助。您可以做的是，保持输出原样，并在处理后将输出文件复制到所需的目录中。以下是你可以做到的方法。

mix.js('resources/js/app.js', 'public/js')
.sass('resources/scss/app.scss', 'public/css')
.webpackConfig({
plugins: [
new MonacoWebpackPlugin({
languages: ['css', 'html', 'javascript', 'json', 'scss', 'typescript'],
}),
],
})
.copy('SOURCE_PATH', 'DESTINATION_PATH');

使用链式copy函数调用定义要复制的所有文件。或者，还有另一种laravel混合方法copyDirectory(fromDir, toDir)来复制整个目录。

对于更高级的使用，您可以从给定的混合Promise分辨率手动对资产执行后处理，

mix.then(function () {
//Perform post-processing on generated assets
}) //Will be triggered each time Webpack finishes building.

在这里，您可以使用fs模块、自由复制/删除/重命名资产

或者，供应商提取可能会有所帮助。通过在数组中传递库名称，可以使用extract()将Monaco编辑器获取到vendor.js文件中。它会将vendor.js文件输出到公共目录中，然后在copy()之后，函数可能会帮助您复制该文件。