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

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

资源

? 资产

？？？蠢货

？？？css-dev

我想要：

• 开发执行：来自resources/assets/sasscompile 的文件resources/assets/css-dev，没有丑化，没有串联。
• 生产执行：从resources/assets/sasscompile 到resources/assets/css-prod， uglify 和 concatenate 的文件。

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

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 文件在不同的目录中，祝你好运。