[javascript] webpack config

Viewer

copydownloadembedprintName: webpack config
  1. const path = require('path');
  2. const HtmlWebpackPlugin = require('html-webpack-plugin');
  3. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
  4. const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
  5. const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  6. const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  7. const nodeExternals = require('webpack-node-externals');
  8. const {
  9.     extendDefaultPlugins
  10. } = require("svgo");
  11.  
  12. const imageMinimizerOptions = {
  13.     // Lossless optimization with custom option
  14.     // Feel free to experiment with options for better result for you
  15.     plugins: [
  16.         ["gifsicle", {
  17.             interlaced: true
  18.         }],
  19.         ["jpegtran", {
  20.             progressive: true
  21.         }],
  22.         ["optipng", {
  23.             optimizationLevel: 5
  24.         }],
  25.         [
  26.             "svgo",
  27.             {
  28.                 plugins: extendDefaultPlugins([{
  29.                     name: "removeViewBox",
  30.                     active: false,
  31.                 },
  32.                     {
  33.                         name: "addAttributesToSVGElement",
  34.                         params: {
  35.                             attributes: [{
  36.                                 xmlns: "http://www.w3.org/2000/svg"
  37.                             }],
  38.                         },
  39.                     },
  40.                 ]),
  41.             },
  42.         ],
  43.     ],
  44. };
  45. module.exports = {
  46.     entry: path.resolve(__dirname, 'src', 'index.tsx'),
  47.     target: 'web',
  48.     output: {
  49.         publicPath: 'auto',
  50.         path: path.resolve(__dirname, 'build'),
  51.         filename: 'bundle.js'
  52.     },
  53.     externals: [nodeExternals({
  54.         importType: 'umd'
  55.     })],
  56.     optimization: {
  57.         minimizer: [
  58.             (compiler) => {
  59.                 const TerserPlugin = require('terser-webpack-plugin');
  60.                 new TerserPlugin({
  61.                     /* your config */
  62.                 }).apply(compiler);
  63.             },
  64.             new CssMinimizerPlugin()
  65.         ],
  66.     },
  67.     resolve: {
  68.         extensions: ['.tsx', '.ts', '.js', '.jsx'],
  69.         alias: {
  70.             "constants": path.resolve(__dirname, 'src/constants/'),
  71.             "pages": path.resolve(__dirname, 'src/pages/'),
  72.             "containers": path.resolve(__dirname, 'src/containers/'),
  73.             "components": path.resolve(__dirname, 'src/components/'),
  74.             "utils": path.resolve(__dirname, 'src/utils/'),
  75.             "services": path.resolve(__dirname, 'src/services/'),
  76.             "custom-hooks": path.resolve(__dirname, 'src/custom-hooks/'),
  77.             "helpers": path.resolve(__dirname, 'src/helpers/'),
  78.             "styled-components": path.resolve(__dirname, 'src/styled-components/'),
  79.             "assets": path.resolve(__dirname, 'src/assets/'),
  80.             "redux": path.resolve(__dirname, 'src/redux/'),
  81.             "common": path.resolve(__dirname, 'src/common/'),
  82.             "classes": path.resolve(__dirname, 'src/classes/'),
  83.             "interfaces": path.resolve(__dirname, 'src/interfaces/'),
  84.         }
  85.     },
  86.     module: {
  87.         rules: [{
  88.                 test: /\.(ts|js)x?$/,
  89.                 exclude: /node_modules/,
  90.                 use: [{
  91.                     loader: 'babel-loader'
  92.                 }]
  93.             },
  94.             {
  95.                 test: /\.s[ac]ss$/i,
  96.                 use: [
  97.                     "style-loader",
  98.                     "css-loader",
  99.                     "sass-loader",
  100.                 ],
  101.             },
  102.             {
  103.                 test: /\.(png|jpe?g|gif)$/i,
  104.                 use: [{
  105.                     loader: 'file-loader',
  106.                 }, ],
  107.             },
  108.             {
  109.                 test: /\.(jpe?g|png)$/i,
  110.                 type: "asset",
  111.             },
  112.             {
  113.                 test: /.s?css$/,
  114.                 use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
  115.             }
  116.         ]
  117.     },
  118.     mode: 'development',
  119.     plugins: [
  120.         new HtmlWebpackPlugin({
  121.             template: path.resolve(__dirname, 'public/index.html')
  122.         }),
  123.         new ImageMinimizerPlugin({
  124.             minimizerOptions: imageMinimizerOptions
  125.         }),
  126.         new MiniCssExtractPlugin(),
  127.         new BundleAnalyzerPlugin({
  128.             analyzerMode: 'disabled',
  129.             generateStatsFile: true,
  130.             statsOptions: { source: false }
  131.         }),
  132.     ]
  133. }
  134.  

Editor

You can edit this paste and save as new:


File Description
  • webpack config
  • Paste Code
  • 25 Jul-2021
  • 4.38 Kb
You can Share it: