webpack.config.js与Laravel中的Webpack.mix.js有什么区别？

核心区别 #

• 定位不同
  webpack.config.js 是webpack原生的默认配置入口，所有基于webpack构建的项目都可使用，需要开发者手动配置入口、loader、插件、输出规则等全量打包逻辑，灵活度高但上手门槛也高。
  webpack.mix.js 是Laravel生态下的上层封装工具Laravel Mix的专属配置文件，本质是对webpack配置的语法糖封装，核心目的是简化常规前端资源的打包配置成本，不需要开发者从零编写复杂的webpack规则。
• 使用成本不同
  原生webpack配置需要开发者掌握全量webpack配置项，比如要编译Sass资源，你需要手动配置sass-loader、css-loader、postcss-loader、MiniCssExtractPlugin等一整套链路规则；而用Mix只需要一行代码 mix.sass('resources/sass/app.scss', 'public/css') 就能自动完成所有相关配置，还会默认处理资源路径补全、生产环境压缩、hash后缀生成等通用需求。
• 适用场景不同
  webpack.config.js 无框架绑定，适用于所有webpack项目；webpack.mix.js 最初为Laravel项目设计，现在也支持独立在非Laravel项目中使用，但所有配置都需要遵循Mix的封装规则。

用webpack.mix会不会缺失webpack的原生功能？ #

完全不会。Laravel Mix本身就是基于webpack构建的封装层，没有对webpack的能力做任何限制：

• 如果需要扩展配置，可以直接调用 mix.webpackConfig() 方法传入原生webpack配置项，这部分配置会和Mix自动生成的配置自动合并，比如添加自定义插件的写法：

const MyCustomPlugin = require('my-custom-webpack-plugin');

mix.webpackConfig({
  plugins: [
    new MyCustomPlugin()
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'resources/js')
    }
  }
});

• 如果需要更细粒度的修改最终生成的完整webpack配置，可以调用 mix.override() 方法直接操作配置对象，灵活度和直接编写webpack.config.js完全一致。

内容的提问来源于stack exchange，提问作者Abdelrahman