ahmadandika

webpack config

Sep 22nd, 2020
641
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const path = require('path');
  2. const webpack = require('webpack');
  3. const HtmlWebpackPlugin = require('html-webpack-plugin');
  4. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  5. const Dotenv = require('dotenv-webpack');
  6. const BrotliGzipPlugin = require('brotli-gzip-webpack-plugin');
  7.  
  8. module.exports = {
  9.   mode: 'development',
  10.   entry: './src/index.js',
  11.   output: {
  12.     path: path.resolve('dist'),
  13.     filename: '[name].[contenthash].js',
  14.     chunkFilename: '[name].[contenthash].bundle.js',
  15.     publicPath: '/'
  16.   },
  17.   devtool: 'source-map',
  18.   resolveLoader: {
  19.     moduleExtensions: ['-loader']
  20.   },
  21.   resolve: {
  22.     extensions: ['.js', '.jsx']
  23.   },
  24.   module: {
  25.     rules: [
  26.       {
  27.         test: [/\.jsx$/, /\.js$/],
  28.         exclude: /node_modules/,
  29.         loader: 'babel-loader',
  30.         query: {
  31.           presets: ['es2016', 'react', 'stage-0']
  32.         }
  33.       },
  34.       {
  35.         test: /\.html$/,
  36.         exclude: /node_modules/,
  37.         loader: 'html-loader'
  38.       },
  39.       {
  40.         test: /\.css$/,
  41.         exclude: /node_modules/,
  42.         use: ['style-loader', 'css-loader']
  43.       },
  44.       {
  45.         test: /\.scss$/,
  46.         use: [
  47.           {
  48.             loader: 'style-loader'
  49.           },
  50.           {
  51.             loader: 'css-loader',
  52.             options: {
  53.               sourceMap: true
  54.             }
  55.           },
  56.           {
  57.             loader: 'sass-loader',
  58.             options: {
  59.               sourceMap: true
  60.             }
  61.           }
  62.         ]
  63.       },
  64.       {
  65.         test: /\.s?[ac]ss$/,
  66.         use: [
  67.           MiniCssExtractPlugin.loader,
  68.           { loader: 'css-loader', options: { url: false, sourceMap: true } },
  69.           { loader: 'sass-loader', options: { sourceMap: true } }
  70.         ]
  71.       },
  72.       {
  73.         test: /\.(eot|woff|woff2|ttf|svg|png|jpg|gif)$/,
  74.         use: [
  75.           {
  76.             loader: 'file-loader',
  77.             options: {}
  78.           }
  79.         ]
  80.       }
  81.     ]
  82.   },
  83.   optimization: {
  84.     splitChunks: {
  85.       cacheGroups: {
  86.         commons: {
  87.           test: /[\\/]node_modules[\\/]/,
  88.           name: 'vendor',
  89.           chunks: 'all'
  90.         }
  91.       }
  92.     }
  93.   },
  94.   devServer: {
  95.     historyApiFallback: true,
  96.     port: 5163
  97.   },
  98.   plugins: [
  99.     new HtmlWebpackPlugin({
  100.       template: './public/index.html',
  101.       filename: 'index.html'
  102.     }),
  103.     new MiniCssExtractPlugin({
  104.       filename: 'style.css'
  105.     }),
  106.     new Dotenv({
  107.       path: './.env' // Path to .env file (this is the default)
  108.     }),
  109.     new webpack.DefinePlugin({
  110.       'process.env.URL_API': JSON.stringify(process.env.URL_API),
  111.       'process.env.GOOGLE_CLIENT_ID': JSON.stringify(
  112.         process.env.GOOGLE_CLIENT_ID
  113.       )
  114.     })
  115.     // new BrotliGzipPlugin({
  116.     //   asset: '[path].br[query]',
  117.     //   algorithm: 'brotli',
  118.     //   test: /\.(js|css|html|svg)$/,
  119.     //   threshold: 10240,
  120.     //   minRatio: 0.8,
  121.     //   quality: 11
  122.     // }),
  123.     // new BrotliGzipPlugin({
  124.     //   asset: '[path].gz[query]',
  125.     //   algorithm: 'gzip',
  126.     //   test: /\.(js|css|html|svg)$/,
  127.     //   threshold: 10240,
  128.     //   minRatio: 0.8
  129.     // })
  130.   ]
  131. };
  132.  
RAW Paste Data