SHARE
TWEET

Untitled

a guest Sep 18th, 2019 117 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. const webpack = require('webpack');
  2. const path = require('path');
  3. const MiniCssExtractPlugin = require("mini-css-extract-plugin");
  4. const CleanWebpackPlugin = require('clean-webpack-plugin');
  5. const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
  6. const PATH_SOURCE = path.join(__dirname, '/src');
  7. const PATH_BUILD = path.join(__dirname, '/dist');
  8.  
  9. module.exports = (env, argv) => {
  10.   const isDevelopmentMode = argv.mode === 'development';
  11.   const config = {
  12.     mode: argv.mode,
  13.     entry: {
  14.       vendors: ['react', 'react-dom', 'react-router', 'react-router-dom'],
  15.       index: PATH_SOURCE + '/index.tsx',
  16.     },
  17.  
  18.     module: {
  19.       rules: [{
  20.           test: /\.m?js$/,
  21.           exclude: /node_modules/,
  22.           use: {
  23.             loader: 'babel-loader'
  24.           }
  25.         },
  26.         {
  27.           test: /\.s?css$/,
  28.           use: [
  29.             MiniCssExtractPlugin.loader,
  30.             {
  31.               loader: 'css-loader',
  32.               options: {
  33.                 sourceMap: isDevelopmentMode
  34.               }
  35.             },
  36.             {
  37.               loader: 'sass-loader',
  38.               options: {
  39.                 sourceMap: isDevelopmentMode
  40.               }
  41.             }
  42.           ]
  43.         },
  44.         {
  45.           test: /\.tsx?$/,
  46.           loader: 'ts-loader',
  47.           exclude: /node_modules/
  48.         }
  49.       ]
  50.     },
  51.  
  52.     output: {
  53.       path: PATH_BUILD,
  54.       filename: '[name]/[name].js',
  55.       chunkFilename: '[name]/[name].[chunkhash].chunk.js',
  56.     },
  57.  
  58.     resolve: {
  59.       modules: [path.join(__dirname, 'src'), 'node_modules'],
  60.       extensions: ['.ts', '.tsx', '.js', '.jsx', '.css', '.scss', '.json'],
  61.     },
  62.    
  63.     plugins: [
  64.       new MiniCssExtractPlugin({
  65.         filename: '[name]/[name].css'
  66.       })
  67.     ],
  68.  
  69.     optimization: {
  70.       splitChunks: {
  71.         cacheGroups: {
  72.           commons: {
  73.             test: /[\\/]node_modules[\\/]/,
  74.             name: 'vendors',
  75.             chunks: 'all'
  76.           }
  77.         }
  78.       }
  79.     }
  80.   }
  81.  
  82.   if ( isDevelopmentMode ) {
  83.     config.devtool = 'inline-source-map'
  84.     config.optimization = {
  85.       minimize: false
  86.     }
  87.  
  88.     config.plugins.push(
  89.       new OptimizeCSSAssetsPlugin({
  90.         cssProcessorOptions: {
  91.           map: {
  92.             inline: false
  93.           }
  94.         }
  95.       }),
  96.     )
  97.  
  98.   } else {
  99.     config.plugins.push(
  100.       new OptimizeCSSAssetsPlugin({}),
  101.       new CleanWebpackPlugin(['dist'])
  102.     )
  103.     config.optimization = {
  104.       minimize: true
  105.     }
  106.   }
  107.  
  108.   return config;
  109. }
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