Question

在制作应用程序之后，我们在webpack.mix中看到的所有内容都是：

const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

我知道如何运行开发和生产构建，但不知道如何自定义它。在这个问题中，我们考虑了根据构建类型在不同路径中编译sass到css的示例，但我认为使用es6和pug构建将是类似的。

项目结构：

公共

css-prod

资源

资产

sass

css-dev

我想：

开发执行：来自resources/assets/sass的文件编译resources/assets/css-dev，没有丑化，没有连接。
正在执行生产：从resources/assets/sass编译到resources/assets/css-prod，uglify和连接的文件。

我应该在哪里定义这些设置？

Answer 1

这可以在 webpack.mix.js ：

中完成

...
if (mix.inProduction()) {
  jsOutputDir = '/path/to/production';
  cssOutputDir = '/path/to/production';
} else {
  jsOutputDir = '/path/to/development';
  cssOutputDir = '/path/to/development';      
}

mix.js('resources/assets/js/xxxx.js', jsOutputDir)
   .css('resources/assets/css/xxxx.css',cssOutputdir)

现在，运行npm run dev或npm run production，将您的JavaScript和css文件放在不同的目录中，祝您好运。

Answer 2

这可以在不更改或添加新输出目录的情况下实际完成。您可以像使用旧的webpack一样轻松地构建用于开发或生产的资产。例如：

//Run all mix in development
npm run dev

//Run mix in production
npm run production

npm run production将缩小所有混音任务，并将存储在公共目录中。

请阅读here。

Laravel-Mix：用于开发和生产构建的不同输出路径（以css为例）

2 个答案: