Cheatsheet Webpack

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.[contenthash].js',
  },
  mode: 'production',
};

Estructura mínima.

entry: {
  app: './src/app.js',
  vendor: './src/vendor.js',
},
output: {
  filename: '[name].[contenthash].js',
  clean: true,
}

Múltiples puntos de entrada.

resolve: {
  extensions: ['.js', '.jsx', '.ts'],
  alias: {
    '@': path.resolve(__dirname, 'src'),
    'components': './src/components',
  },
}

Resolución de módulos.

devtool: 'source-map'      # completo
devtool: 'eval-source-map' # dev rápido
devtool: 'cheap-module-source-map'
devtool: false            # producción

Opciones de source maps.

module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader'],
    },
  ],
}

Definir loaders.

{
  test: /\.(js|jsx)$/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: { presets: ['@babel/preset-env'] }
  },
}

Transpilar JavaScript.

// CSS
use: ['style-loader', 'css-loader']

// SASS
use: ['style-loader', 'css-loader',
  'sass-loader']

// Extraer a archivo
use: [MiniCssExtractPlugin.loader,
  'css-loader']

Procesar estilos.

{
  test: /\.(png|svg|jpg|gif)$/,
  type: 'asset',
  parser: {
    dataUrlCondition: {
      maxSize: 8 * 1024
    }
  }
}

Asset modules (Webpack 5).

new HtmlWebpackPlugin({
  template: './src/index.html',
  title: 'Mi App',
  minify: { collapseWhitespace: true },
})

Generar HTML con bundles.

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

Extraer CSS a archivos.

new webpack.DefinePlugin({
  'process.env.API_URL':
    JSON.stringify(process.env.API_URL),
  __DEV__: JSON.stringify(true),
})

Variables en tiempo de compilación.

new CopyPlugin({
  patterns: [
    { from: 'public', to: '' }
  ],
})

output: { clean: true }

Copiar assets estáticos.

devServer: {
  port: 3000,
  hot: true,
  open: true,
  historyApiFallback: true,
  proxy: [{
    context: ['/api'],
    target: 'http://localhost:8080',
  }],
}

Servidor de desarrollo.

devServer: { hot: true }

// En el código:
if (module.hot) {
  module.hot.accept('./app', () => {
    render();
  });
}

Actualización sin reload.

"scripts": {
  "dev": "webpack serve --mode development",
  "build": "webpack --mode production",
  "watch": "webpack --watch",
  "analyze": "webpack --profile --json > stats.json"
}

Scripts de ejecución.

optimization: {
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\/]node_modules[\/]/,
        name: 'vendors',
      }
    }
  }
}

Dividir bundles.

// Lazy loading de rutas
const Page = React.lazy(
  () => import('./pages/Home')
);

// webpackChunkName
import(/* webpackChunkName: "admin" */
  './Admin');

Import dinámico.

optimization: {
  minimize: true,
  minimizer: [
    new TerserPlugin(),
    new CssMinimizerPlugin(),
  ],
}

Minificar JS y CSS.

// package.json del módulo:
"sideEffects": false

// o específico:
"sideEffects": ["*.css"]

// mode: 'production' lo activa automáticamente

Eliminar código no usado.

npx webpack           # build
npx webpack serve      # dev server
npx webpack --watch   # watch mode
npx webpack --config webpack.prod.js

Ejecutar webpack.

--mode production
--mode development
--entry ./src/main.js
--output-path ./build
--stats verbose
--progress

Opciones de línea de comandos.

npm i -D webpack-bundle-analyzer

new BundleAnalyzerPlugin()

// o:
npx webpack --profile --json > stats.json
npx webpack-bundle-analyzer stats.json

Visualizar tamaño del bundle.