Laravel Mix 4 发布

上周 Jeffrey Way 发布了 Laravel Mix v4，这是 Laravel Mix 的下一个主要版本。Mix 4 使用 Webpack 4，并附带其他不错的改进。以下是来自 Release v4.0.0 的 Mix 4 中新功能的高级列表。

编译速度更快
npm 安装速度更快。
升级到 webpack 4
升级到 vue-loader 15
升级到 Babel 7
自动供应商提取。如果您在没有参数的情况下调用 mix.extract()，所有供应商依赖项（* 来自 node_modules/ 的任何包）将自动提取。很不错！
可以提供 CSS 缩小（通过 cssnano）选项
可以按每次调用的方式将 PostCSS 插件传递给 mix.sass/less/stylus()。这意味着您可以根据需要为每个 mix.sass() 调用提供 * 唯一的 PostCSS 插件。
将 JS 优化/缩小从 Uglify 切换到 Terser。
从 node-sass 切换到 Dart Sass。虽然这会带来编译时间略微增加的成本，但好处是 npm 安装速度更快、更可靠。
改进了 Babel 配置合并策略。您现在可以通过在项目根目录中创建 .babelrc 文件来覆盖或调整通过 Mix 提供的任何默认 Babel 插件和预设。

在幕后，Mix 从 node-sass 更改为 dart-sass。支持“基本相同”，但在升级时您可能会注意到一些编译警告。您可以通过安装 node-sass 包并配置实现来手动更改回原来的。

mix.sass('resources/sass/app.sass', 'public/css', {
    implementation: require('node-sass')
});

除了 4.0 版本外，Jeffrey 还将 laravel/laravel 仓库更新到 v4。我建议您阅读他的 PR 笔记以了解对几个额外 NPM 依赖项的需求以及添加到与 Laravel 一起提供的 Vue <example-component/> 的 .default 属性。

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

特别注意，vue-loader v13 需要 .default，“...如果您使用 CommonJS 风格的 require 来导入 ES 模块。”

Jeffrey 对 laravel/laravel 中所需的额外 sass 相关模块的解释有助于我理解他添加它们的理由。

过去，我们包含了所有 Sass 依赖项，无论用户是否希望为他们的应用程序进行 Sass 编译。在 v4 中，Mix 现在按需安装这些依赖项 - 仅当用户使用 mix.sass() 请求时才安装。但是，因为 laravel/laravel 包含 Sass 样板，所以我在这里添加了它们以跳过额外的下载步骤。

Mix v4 可以根据调用 mix.sass() 的配置文件自动按需安装所需的依赖项，这很酷。