Laravel mix 5 webpack.mix.js

webpack.mix.js

const path = require("path");
const mix = require("laravel-mix");
require("laravel-mix-vue-css-modules"); // https://github.com/Aslam97/laravel-mix-vue-css-modules
// const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer')

const purgeCss = mix.inProduction()
  ? [
      require("@fullhuman/postcss-purgecss")({
        content: ["resources/**/*.blade.php", "resources/**/*.vue"],
        defaultExtractor(content) {
          const contentWithoutStyleBlocks = content.replace(
            /<style[^]+?<\/style>/gi,
            ""
          );
          return (
            contentWithoutStyleBlocks.match(
              /[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g
            ) || []
          );
        },
        safelist: [
          /-(leave|enter|appear)(|-(to|from|active))$/,
          /^(?!(|.*?:)cursor-move).+-move$/,
          /^router-link(|-exact)-active$/,
          /data-v-.*/,
          /modal-.*/,
          /panelbox-.*/
        ]
      })
    ]
  : [];

mix
  .js("resources/js/app.js", "public/js")
  .sass("resources/sass/app.scss", "public/css");

mix.webpackConfig({
  resolve: {
    extensions: [".js", ".json", ".vue"],
    alias: {
      "@": path.join(__dirname, "./resources/js"),
      "~": path.join(__dirname, "./resources/sass"),
      "@layouts": path.join(__dirname, "./resources/js/layouts"),
      "@components": path.join(__dirname, "./resources/js/components"),
      "@assets": path.join(__dirname, "./resources/assets"),
      "@lang": path.join(__dirname, "./resources/js/lang")
    }
  },
  output: {
    chunkFilename: mix.inProduction()
      ? "js/chunks/[contenthash:8].chunk.js"
      : "js/chunks/[name].chunk.js"
  },
  module: {
    rules: [
      {
        // disabled hash for using preload fonts
        test: /(\.(woff2?|ttf|eot|otf)$|font.*\.svg$)/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: path => {
                if (!/node_modules|bower_components/.test(path)) {
                  return "fonts/[name].[ext]";
                }

                const pathUpdated = path
                  .replace(/\\/g, "/")
                  .replace(
                    /((.*(node_modules|bower_components))|fonts|font|assets)\//g,
                    ""
                  );

                return `fonts/vendor/${pathUpdated}`;
              }
            }
          }
        ]
      }
    ]
  }
});

mix.autoload({
  jquery: ["$", "jQuery", "window.jQuery"]
});

mix.options({
  postCss: purgeCss,
  terser: {
    extractComments: false
  },
  autoprefixer: {},
  cssName: {}
});

mix.vueCssModules({
  oneOf: true,
  preProcessor: {
    scss: true
  }
});

if (mix.inProduction()) {
  mix
    // .disableNotifications()
    // .extract() // Disabled until resolved: https://github.com/JeffreyWay/laravel-mix/issues/1889 || resolved in mix 6
    .version();
} else {
  mix.dump();
  mix.sourceMaps(true, "source-map");
}