sassninja / media-query-plugin Goto Github PK

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MediaQueryPlugin = require('media-query-plugin');
const TerserPlugin = require('terser-webpack-plugin');

const resolveConfig = require('tailwindcss/resolveConfig');

const tailwind = resolveConfig(require('./tailwind.config'));

module.exports = {
  devtool: process.env.NODE_ENV === 'development' ? 'inline-source-map' : false,

  target: 'web',

  entry: app: {
    import: path.join(__dirname, 'resources/app.js'),
  },

  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
    new MediaQueryPlugin({
      include: [
        'app',
      ],
      queries: (() => {
        const keys = Object.keys(tailwind.theme.screens);
        const values = Object.values(tailwind.theme.screens);

        const queries = {};

        keys.forEach((key, index) => {
          const value = values[index];

          if (typeof value === 'string') {
            queries[`(min-width: ${value})`] = key;
          }
        });

        return queries;
      })(),
    }),
  ],

  output: {
    filename: '[name].js',
    path: path.join(__dirname, 'src/assets'),
  },

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/i,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              url: false,
            },
          },
          MediaQueryPlugin.loader,
          'postcss-loader',
        ],
      },
    ],
  },

  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          format: {
            comments: false,
          },
        },
        extractComments: false,
      }),

      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            'default',
            {
              discardComments: { removeAll: true },
            },
          ],
        },
      }),
    ],
  },
};

new MiniCssExtractPlugin({
    filename: '[name].css'
}),

new MiniCssExtractPlugin({
    filename: '[name].[contenthash:8].css'
}),

new MiniCssExtractPlugin({
    filename: '[name].[contenthash].css'
}),

new MediaQueryPlugin({
  include: true,
  queries: {
    'screen and (min-width: 1000px)': 'desktop'
  },
  groups: {
    app: /^example/
  }
});

// webpack.config.js
module.exports = {
    context: path.resolve(__dirname, 'WebSrc'),
    entry: {
        page: './js/page.js',
    },
    [...]
    module: {
        rules: [
            {
                test: /\.s?css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 2,
                            sourceMap: true
                        }
                    },
                    MediaQueryPlugin.loader,
                    {
                        loader: 'postcss-loader',
                        options: {
                            plugins: () => [
                                require('autoprefixer')(),
                            ],
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            [...]
        ]
    },
    optimization: {
        splitChunks: {
            minSize: 1,
            cacheGroups: {
                js: {
                    test: /\.js$/,
                    name: "commons",
                    chunks: "all",
                    minChunks: 7,
                },
                css: {
                    test: /\.s?css$/,
                    name: "commons",
                    chunks: "all",
                    minChunks: 7,
                },
            }
        }
    },
    plugins: [
        new MiniCssExtractPlugin({
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: "dist/[name].css",
        }),
        new MediaQueryPlugin({
            include: true,
            queries: {
                '(min-width: 1200px)': 'xl'
            }
        }),
    ],
};

// page.js
import "./a.scss";
import "./b.scss";

plugins: [
    ...
    new MediaQueryPlugin({
      include: true,
      queries: {
        'screen and (min-width: 640px)': 'medium',
        'screen and (min-width: 960px)': 'large',
        'screen and (min-width: 1280px)': 'x-large',
      },
      groups: {
        bundle: /.*/
      },
    }),
    new MiniCssExtractWebpackPlugin(
      {
        filename: '[name].[contenthash].css',
      }
    ),
  ],
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          MiniCssExtractWebpackPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              modules: {
                localIdentName: isDev ? '[name]__[local]__[hash:base64:5]' : '[hash:base64:5]',
              },
              importLoaders: 2,
            },
          },
          MediaQueryPlugin.loader,
          'postcss-loader',
          'sass-loader',
          {
            loader: 'sass-resources-loader',
            options: {
              resources: getBrandResources(__dirname, brandName),
            },
          },
        ],
      },
    ],
  },

import(/* webpackChunkName: 'example-desktop' */ './example-desktop.scss');

// webpack.config.js

queries: {
  '(min-width:1000px)': 'desktop'
}

// webpack.config.js
const Encore = require('@symfony/webpack-encore');

const MediaQueryPlugin = require('media-query-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

Encore
    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()

    // the project directory where all compiled assets will be stored
    .setOutputPath('web/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')

    // will create web/build/app.js and web/build/app.css
    .addEntry('app', './web_src/assets/js/app.js')

    // allow sass/scss files to be processed
    // .enableSassLoader()

    .enablePostCssLoader()

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    .enableSourceMaps(!Encore.isProduction())

    // enable react
    .enableReactPreset()
    .configureBabel(function(babelConfig) {
        babelConfig.plugins = [
            'transform-class-properties',
            'transform-object-rest-spread'
        ];
    })

    .addLoader({
        test: /\.scss$/,
        use: [
            MiniCssExtractPlugin.loader,
            'css-loader',
            MediaQueryPlugin.loader,
            'postcss-loader',
            'sass-loader'
        ]
    })

    .addPlugin(
        new MediaQueryPlugin({
            include: ['app'],
            queries: {
                // commented media queries are not worth it (yet)
                '(max-width: 575.98px)': 'xs-down',
                '(min-width: 576px)': 'sm-up',
                // '(max-width: 767.98px)': 'sm-down',
                '(min-width: 768px)': 'md-up',
                // '(max-width: 991.98px)': 'md-down',
                '(min-width: 992px)': 'lg-up',
                // '(max-width: 1199.98px)': 'lg-down',
                '(min-width: 1200px)': 'xl-up',
                // '(min-width: 576px) and (max-width: 767.98px)': 'sm-only',
                // 'screen and (prefers-reduced-motion: reduce)': 'prm',
                print: 'print'
            }
        })
    );

module.exports = Encore.getWebpackConfig();

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Critters = require('critters-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MediaQueryPlugin = require('media-query-plugin');
const DuplicatePackageCheckerPlugin = require('duplicate-package-checker-webpack-plugin');
const project = require('./aurelia_project/aurelia.json');
const {
  AureliaPlugin,
  ModuleDependenciesPlugin
} = require('aurelia-webpack-plugin');
const { ProvidePlugin } = require('webpack');
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

// config helpers:
const ensureArray = config =>
  (config && (Array.isArray(config) ? config : [config])) || [];
const when = (condition, config, negativeConfig) =>
  condition ? ensureArray(config) : ensureArray(negativeConfig);

// primary config:
const title = 'Something';
const outDir = path.resolve(__dirname, project.platform.output);
const srcDir = path.resolve(__dirname, 'src');
const nodeModulesDir = path.resolve(__dirname, 'node_modules');
const baseUrl = '/';

const cssRules = [
  { loader: 'css-loader' },
  MediaQueryPlugin.loader,
  {
    loader: 'postcss-loader',
    options: {
      plugins: () => [
        require('autoprefixer')({ browsers: ['last 2 versions'] }),
        require('postcss-color-function'),
        require('cssnano')({ preset: 'default' })
      ]
    }
  }
]

module.exports = ({
  production,
  server,
  extractCss,
  coverage,
  analyze,
  karma
} = {}) => ({
  resolve: {
    extensions: ['.js'],
    modules: [srcDir, nodeModulesDir],
    // Enforce single aurelia-binding, to avoid v1/v2 duplication due to
    // out-of-date dependencies on 3rd party aurelia plugins
    alias: {
      'aurelia-binding': path.resolve(__dirname, 'node_modules/aurelia-binding')
    }
  },
  entry: {
    app: ['aurelia-bootstrapper']
  },
  mode: production ? 'production' : 'development',
  output: {
    path: outDir,
    publicPath: baseUrl,
    filename: production
      ? '[name].[chunkhash].bundle.js'
      : '[name].[hash].bundle.js',
    sourceMapFilename: production
      ? '[name].[chunkhash].bundle.map'
      : '[name].[hash].bundle.map',
    chunkFilename: production
      ? '[name].[chunkhash].chunk.js'
      : '[name].[hash].chunk.js'
  },
  optimization: {
    runtimeChunk: true, // separates the runtime chunk, required for long term cacheability
    // moduleIds is the replacement for HashedModuleIdsPlugin and NamedModulesPlugin deprecated in https://github.com/webpack/webpack/releases/tag/v4.16.0
    // changes module id's to use hashes be based on the relative path of the module, required for long term cacheability
    moduleIds: 'hashed',
    // Use splitChunks to breakdown the App/Aurelia bundle down into smaller chunks
    // https://webpack.js.org/plugins/split-chunks-plugin/
    splitChunks: {
      hidePathInfo: true, // prevents the path from being used in the filename when using maxSize
      chunks: 'initial',
      // sizes are compared against source before minification
      maxInitialRequests: Infinity, // Default is 3, make this unlimited if using HTTP/2
      maxAsyncRequests: Infinity, // Default is 5, make this unlimited if using HTTP/2
      minSize: 10000, // chunk is only created if it would be bigger than minSize, adjust as required
      maxSize: 40000, // splits chunks if bigger than 40k, adjust as required (maxSize added in webpack v4.15)
      cacheGroups: {
        default: false, // Disable the built-in groups default & vendors (vendors is redefined below)
        // You can insert additional cacheGroup entries here if you want to split out specific modules
        // This is required in order to split out vendor css from the app css when using --extractCss
        // For example to separate font-awesome and bootstrap:
        // fontawesome: { // separates font-awesome css from the app css (font-awesome is only css/fonts)
        //   name: 'vendor.font-awesome',
        //   test:  /[\\/]node_modules[\\/]font-awesome[\\/]/,
        //   priority: 100,
        //   enforce: true
        // },
        // bootstrap: { // separates bootstrap js from vendors and also bootstrap css from app css
        //   name: 'vendor.font-awesome',
        //   test:  /[\\/]node_modules[\\/]bootstrap[\\/]/,
        //   priority: 90,
        //   enforce: true
        // },

        // This is the HTTP/2 optimised cacheGroup configuration
        // generic 'initial/sync' vendor node module splits: separates out larger modules
        vendorSplit: {
          // each node module as separate chunk file if module is bigger than minSize
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // Extract the name of the package from the path segment after node_modules
            const packageName = module.context.match(
              /[\\/]node_modules[\\/](.*?)([\\/]|$)/
            )[1];
            return `vendor.${packageName.replace('@', '')}`;
          },
          priority: 20
        },
        vendors: {
          // picks up everything else being used from node_modules that is less than minSize
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          priority: 19,
          enforce: true // create chunk regardless of the size of the chunk
        },
        // generic 'async' vendor node module splits: separates out larger modules
        vendorAsyncSplit: {
          // vendor async chunks, create each asynchronously used node module as separate chunk file if module is bigger than minSize
          test: /[\\/]node_modules[\\/]/,
          name(module) {
            // Extract the name of the package from the path segment after node_modules
            const packageName = module.context.match(
              /[\\/]node_modules[\\/](.*?)([\\/]|$)/
            )[1];
            return `vendor.async.${packageName.replace('@', '')}`;
          },
          chunks: 'async',
          priority: 10,
          reuseExistingChunk: true,
          minSize: 5000 // only create if 5k or larger
        },
        vendorsAsync: {
          // vendors async chunk, remaining asynchronously used node modules as single chunk file
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors.async',
          chunks: 'async',
          priority: 9,
          reuseExistingChunk: true,
          enforce: true // create chunk regardless of the size of the chunk
        },
        // generic 'async' common module splits: separates out larger modules
        commonAsync: {
          // common async chunks, each asynchronously used module a separate chunk file if module is bigger than minSize
          name(module) {
            // Extract the name of the module from last path component. 'src/modulename/' results in 'modulename'
            const moduleName = module.context.match(/[^\\/]+(?=\/$|$)/)[0];
            return `common.async.${moduleName.replace('@', '')}`;
          },
          minChunks: 2, // Minimum number of chunks that must share a module before splitting
          chunks: 'async',
          priority: 1,
          reuseExistingChunk: true,
          minSize: 5000 // only create if 5k or larger
        },
        commonsAsync: {
          // commons async chunk, remaining asynchronously used modules as single chunk file
          name: 'commons.async',
          minChunks: 2, // Minimum number of chunks that must share a module before splitting
          chunks: 'async',
          priority: 0,
          reuseExistingChunk: true,
          enforce: true // create chunk regardless of the size of the chunk
        }
      }
    }
  },
  performance: { hints: false },
  devServer: {
    contentBase: outDir,
    // serve index.html for all 404 (required for push-state)
    historyApiFallback: true
  },
  devtool: production ? 'nosources-source-map' : 'cheap-module-eval-source-map',
  module: {
    rules: [
      // CSS required in JS/TS files should use the style-loader that auto-injects it into the website
      // only when the issuer is a .js/.ts file, so the loaders are not applied inside html templates
      {
        test: /\.css$/i,
        issuer: [{ not: [{ test: /\.html$/i }] }],
        use: extractCss
          ? [
            {
              loader: MiniCssExtractPlugin.loader
            },
            ...cssRules
          ]
          : ['style-loader', ...cssRules]
      },
      {
        test: /\.css$/i,
        issuer: [{ test: /\.html$/i }],
        // CSS required in templates cannot be extracted safely
        // because Aurelia would try to require it again in runtime
        use: cssRules
      },
      { test: /\.html$/i, loader: 'html-loader' },
      {
        test: /\.js$/i,
        loader: 'babel-loader',
        exclude: nodeModulesDir,
        options: coverage ? { sourceMap: 'inline', plugins: ['istanbul'] } : {}
      },
      // use Bluebird as the global Promise implementation:
      {
        test: /[\/\\]node_modules[\/\\]bluebird[\/\\].+\.js$/,
        loader: 'expose-loader?Promise'
      },
      // embed small images and fonts as Data Urls and larger ones as files:
      {
        test: /\.(png|gif|jpg|cur)$/i,
        loader: 'url-loader',
        options: { limit: 8192 }
      },
      {
        test: /\.(eot|otf|ttf|woff|woff2)$/,
        loader: 'file-loader?name=fonts/[name].[ext]'
      },
      {
        test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/i,
        loader: 'file-loader'
      }
    ]
  },
  plugins: [
    ...when(!karma, new DuplicatePackageCheckerPlugin()),
    new AureliaPlugin(),
    new ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      Hammer: 'hammerjs'
    }),
    new ProvidePlugin({
      Promise: 'bluebird'
    }),
    new ModuleDependenciesPlugin({
      'aurelia-testing': ['./compile-spy', './view-spy']
    }),
    new HtmlWebpackPlugin({
      template: 'index.ejs',
      minify: production
        ? {
          removeComments: true,
          collapseWhitespace: true,
          collapseInlineTagWhitespace: true,
          collapseBooleanAttributes: true,
          removeAttributeQuotes: true,
          minifyCSS: true,
          minifyJS: true,
          removeScriptTypeAttributes: true,
          removeStyleLinkTypeAttributes: true,
          ignoreCustomFragments: [/\${.*?}/g]
        }
        : undefined,
      metadata: {
        // available in index.ejs //
        title,
        server,
        baseUrl
      }
    }),
    // ref: https://webpack.js.org/plugins/mini-css-extract-plugin/
    ...when(extractCss, [
      new MiniCssExtractPlugin({
        // updated to match the naming conventions for the js files
        filename: production
          ? 'css/[name].[contenthash].bundle.css'
          : 'css/[name].[hash].bundle.css',
        chunkFilename: production
          ? 'css/[name].[contenthash].chunk.css'
          : 'css/[name].[hash].chunk.css'
      })
    ]),

    ...when(
      production || server,
      new CopyWebpackPlugin([{ from: 'static', to: outDir, ignore: ['.*'] }])
    ), // ignore dot (hidden) files
    new MediaQueryPlugin({
      include: true,
      queries: {
        'only screen and (min-width: 1200px)': 'desktop',
        'only screen and (min-width: 992px)': 'desktop',
        'only screen and (max-width: 767px)': 'mobile'
      }
    }),
    //new Critters({
    //  preload: 'js'
    //}),
    ...when(analyze, new BundleAnalyzerPlugin())
  ]
});

module.exports = {
  entry: {
    home: 'src/home/index.js',
    info: 'src/info/index.js',
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[chunkhash].css',
    })
  ]
}

new HtmlWebpackPlugin({
  template: 'src/index.html',
  title: '<titleName is private>',
  inject: false,
  hash: true
})

{
  test: /\.(css|less)$/,
  use: [
    MiniCssExtractPlugin.loader,
    'css-loader',
    MediaQueryPlugin.loader,
    'less-loader'
  ]
}

new MiniCssExtractPlugin({
  filename: '[name].[chunkhash].css',
  chunkFilename: '[id].[chunkhash].css'
}),
new MediaQueryPlugin({
  queries: {
    'only screen and (min-width : 1224px)': 'des',
    'only screen and (min-width : 1824px)': 'des'
  }
}),