4

我们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和构建将是相似的。csses6pug

项目结构：

上市

　　　 css-产品

资源

　 资产

　　　 粗鲁的

　　　 CSS开发

我想：

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

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

4

2 回答 2

8

这可以在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 文件，祝你好运。

于 2017-10-27T06:49:36.407 回答
-1

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

//Run all mix in development
npm run dev

//Run mix in production
npm run production

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

请阅读这里。

于 2017-05-10T05:30:15.903 回答