SHARE
TWEET

Untitled

a guest Oct 21st, 2019 96 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const path = require('path');
  2. const data = require('./frontend/manifest');
  3.  
  4. const CleanWebpackPlugin = require('clean-webpack-plugin');
  5. const CopyWebpackPlugin = require('copy-webpack-plugin');
  6. const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
  7. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  8. const TerserPlugin = require('terser-webpack-plugin');
  9. const FixStyleOnlyEntriesPlugin = require('webpack-fix-style-only-entries');
  10. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  11. const ManifestPlugin = require('webpack-manifest-plugin');
  12.  
  13. const entries = {};
  14. // Scripts
  15. // Dynamic entry points defined in the manifest with fallback on the default head.js and app.js
  16. if (data.scripts) {
  17.   for (var key in data.scripts) {
  18.     const entryName = path.parse(key).name;
  19.     entries[entryName] = path.resolve(data.paths.source, data.scripts[key]);
  20.   }
  21. }
  22.  
  23. // Styles
  24. // Dynamic entry points defined in the manifest with fallback on the default app.scss and html4css.scss
  25. if (data.styles) {
  26.   for (var key in data.styles) {
  27.     const entryName = path.parse(key).name;
  28.     entries[entryName] = path.resolve(data.paths.source, data.styles[key]);
  29.   }
  30. }
  31.  
  32. module.exports = (env, argv) => {
  33.   const devMode = argv.mode && Boolean(argv.mode !== 'production');
  34.   const verboseMode = argv.verbosemode && Boolean(argv.verbosemode !== 'false');
  35.   const sourcePath = path.resolve(data.paths.source);
  36.  
  37.   let defaultWebpackConfig = {
  38.     entry: entries,
  39.     output: {
  40.       filename: devMode ? '[name].js' : '[name].[chunkhash:8].js',
  41.       path: path.resolve(data.paths.dist),
  42.     },
  43.     resolve: {
  44.       alias: {
  45.         '@': sourcePath,
  46.       },
  47.     },
  48.     stats: verboseMode ? 'verbose' : {
  49.       children: false, // Shut up child plugin logs. Example: MiniCssExtractPlugin,
  50.       entrypoints: true,
  51.       // Set the maximum number of modules to be shown
  52.       maxModules: 15,
  53.     },
  54.     devtool: devMode ? 'source-map' : false,
  55.     module: {
  56.       rules: [
  57.         {
  58.           test: /\.js$/,
  59.           // exclude: /node_modules\/(?!(@antoine_a17|@gulp-sourcemaps|)\/).*/,
  60.           loader: require.resolve('babel-loader'),
  61.           options: {
  62.             presets: [require.resolve('@babel/preset-env')],
  63.             cacheDirectory: true
  64.           }
  65.         },
  66.         {
  67.           test: /\.scss$/,
  68.           use: [
  69.             MiniCssExtractPlugin.loader,
  70.             {
  71.               loader: require.resolve('css-loader'),
  72.               options: {
  73.                 importLoaders: 2,
  74.                 url: true,
  75.                 sourceMap: false,
  76.               },
  77.             },
  78.             {
  79.               loader: require.resolve('sass-loader'),
  80.               options: {
  81.                 url: true,
  82.                 sourceMap: false,
  83.                 implementation: require('sass'), // dart-sass
  84.               },
  85.             },
  86.           ],
  87.         },
  88.         {
  89.           test: /\.svg$/,
  90.           loader: 'file-loader',
  91.           options: {
  92.             name: devMode ? '[name].[ext]' : '[name].[contenthash].[ext]',
  93.             publicPath: data.paths.assets + data.paths.images,
  94.             outputPath: data.paths.images,
  95.           },
  96.         },
  97.         {
  98.           test: /\.(jpg|png|gif)$/,
  99.           loader: 'file-loader',
  100.           options: {
  101.             name: devMode ? '[name].[ext]' : '[name].[contenthash].[ext]',
  102.             publicPath: data.paths.assets + data.paths.images,
  103.             outputPath: data.paths.images,
  104.           },
  105.         },
  106.         {
  107.           // from file used like that "~@/fonts/Px-Grotesk-Bold.woff" inside .scss file
  108.           test: /\.(woff|woff2|ttf|eot|otf)(\?v=\d+\.\d+\.\d+)?$/,
  109.           loader: 'file-loader',
  110.           options: {
  111.             name: devMode ? '[name].[ext]' : '[name].[contenthash].[ext]',
  112.             publicPath: data.paths.assets + data.paths.fonts,
  113.             outputPath: data.paths.fonts,
  114.           },
  115.         },
  116.       ],
  117.     },
  118.     optimization: {
  119.       minimizer: [
  120.         new TerserPlugin(),
  121.         new OptimizeCSSAssetsPlugin(),
  122.       ],
  123.     },
  124.     plugins: [
  125.       new CleanWebpackPlugin({
  126.         root: path.resolve(),
  127.         verbose: verboseMode,
  128.         beforeEmit: true,
  129.       }),
  130.       new FixStyleOnlyEntriesPlugin(),
  131.       new MiniCssExtractPlugin({
  132.         filename: devMode ? `[name].css` : `[name].[contenthash].css`,
  133.         path: path.resolve(data.paths.dist),
  134.       }),
  135.       new CopyWebpackPlugin([
  136.         {
  137.           from: path.resolve(data.paths.source + 'images/'),
  138.           ignore: ['icons.svg'],
  139.           to: devMode ?
  140.               path.resolve(data.paths.dist + 'images/[name].[ext]') :
  141.               path.resolve(data.paths.dist + 'images/[name].[hash].[ext]'),
  142.         },
  143.         {
  144.           from: path.resolve(data.paths.source + 'images/icons.svg'),
  145.           to: devMode ?
  146.               path.resolve(data.paths.dist + 'icons/[name].[ext]') :
  147.               path.resolve(data.paths.dist + 'icons/[name].[hash].[ext]'),
  148.         },
  149.       ]),
  150.     ],
  151.   };
  152.  
  153.   if (devMode) {
  154.     // Default BrowserSyncOptions
  155.     let defaultBrowserSyncConfig = {
  156.       ui: {port: 3001},
  157.       port: 3000,
  158.       snippetOptions: {
  159.         whitelist: data.config.whitelist,
  160.         blacklist: data.config.blacklist,
  161.       },
  162.     };
  163.  
  164.     // Default BrowserSync config altered by the manifest.json
  165.     //
  166.     // Proxy : it will use the environment DEV_URL variable or the manifest.config.devUrl if set
  167.     if (data.config.devUrl) defaultBrowserSyncConfig.proxy = data.config.devUrl;
  168.     if (process.env.DEV_URL) defaultBrowserSyncConfig.proxy = process.env.DEV_URL;
  169.  
  170.     // Port or the Browser Sync UI  and port of the application
  171.     if (data.config.browsersyncUiPort) defaultBrowserSyncConfig.ui.port = data.config.browsersyncUiPort;
  172.     if (data.config.browsersyncPort) defaultBrowserSyncConfig.port = data.config.browsersyncPort;
  173.  
  174.     defaultWebpackConfig.plugins.push(
  175.         new BrowserSyncPlugin(defaultBrowserSyncConfig, {reload: true}));
  176.   } else {
  177.     defaultWebpackConfig.plugins.push(new ManifestPlugin({
  178.       fileName: 'rev-manifest.json',
  179.       filter(file) {
  180.         return !file.name.includes('.keep');
  181.       },
  182.       map: (file) => {
  183.         file.name = file.name.replace(/(\.[a-f0-9]{32})(\..*)$/, '$2');
  184.         return file;
  185.       },
  186.     }));
  187.   }
  188.   return defaultWebpackConfig;
  189. };
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top