[javascript] webpack config
Viewer
*** This page was generated with the meta tag "noindex, nofollow". This happened because you selected this option before saving or the system detected it as spam. This means that this page will never get into the search engines and the search bot will not crawl it. There is nothing to worry about, you can still share it with anyone.
- const path = require('path');
- const HtmlWebpackPlugin = require('html-webpack-plugin');
- const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
- const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
- const MiniCssExtractPlugin = require('mini-css-extract-plugin');
- const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
- const nodeExternals = require('webpack-node-externals');
- const {
- extendDefaultPlugins
- } = require("svgo");
- const imageMinimizerOptions = {
- // Lossless optimization with custom option
- // Feel free to experiment with options for better result for you
- plugins: [
- ["gifsicle", {
- interlaced: true
- }],
- ["jpegtran", {
- progressive: true
- }],
- ["optipng", {
- optimizationLevel: 5
- }],
- [
- "svgo",
- {
- plugins: extendDefaultPlugins([{
- name: "removeViewBox",
- active: false,
- },
- {
- name: "addAttributesToSVGElement",
- params: {
- attributes: [{
- xmlns: "http://www.w3.org/2000/svg"
- }],
- },
- },
- ]),
- },
- ],
- ],
- };
- module.exports = {
- entry: path.resolve(__dirname, 'src', 'index.tsx'),
- target: 'web',
- output: {
- publicPath: 'auto',
- path: path.resolve(__dirname, 'build'),
- filename: 'bundle.js'
- },
- externals: [nodeExternals({
- importType: 'umd'
- })],
- optimization: {
- minimizer: [
- (compiler) => {
- const TerserPlugin = require('terser-webpack-plugin');
- new TerserPlugin({
- /* your config */
- }).apply(compiler);
- },
- new CssMinimizerPlugin()
- ],
- },
- resolve: {
- extensions: ['.tsx', '.ts', '.js', '.jsx'],
- alias: {
- "constants": path.resolve(__dirname, 'src/constants/'),
- "pages": path.resolve(__dirname, 'src/pages/'),
- "containers": path.resolve(__dirname, 'src/containers/'),
- "components": path.resolve(__dirname, 'src/components/'),
- "utils": path.resolve(__dirname, 'src/utils/'),
- "services": path.resolve(__dirname, 'src/services/'),
- "custom-hooks": path.resolve(__dirname, 'src/custom-hooks/'),
- "helpers": path.resolve(__dirname, 'src/helpers/'),
- "styled-components": path.resolve(__dirname, 'src/styled-components/'),
- "assets": path.resolve(__dirname, 'src/assets/'),
- "redux": path.resolve(__dirname, 'src/redux/'),
- "common": path.resolve(__dirname, 'src/common/'),
- "classes": path.resolve(__dirname, 'src/classes/'),
- "interfaces": path.resolve(__dirname, 'src/interfaces/'),
- }
- },
- module: {
- rules: [{
- test: /\.(ts|js)x?$/,
- exclude: /node_modules/,
- use: [{
- loader: 'babel-loader'
- }]
- },
- {
- test: /\.s[ac]ss$/i,
- use: [
- "style-loader",
- "css-loader",
- "sass-loader",
- ],
- },
- {
- test: /\.(png|jpe?g|gif)$/i,
- use: [{
- loader: 'file-loader',
- }, ],
- },
- {
- test: /\.(jpe?g|png)$/i,
- type: "asset",
- },
- {
- test: /.s?css$/,
- use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
- }
- ]
- },
- mode: 'development',
- plugins: [
- new HtmlWebpackPlugin({
- template: path.resolve(__dirname, 'public/index.html')
- }),
- new ImageMinimizerPlugin({
- minimizerOptions: imageMinimizerOptions
- }),
- new MiniCssExtractPlugin(),
- new BundleAnalyzerPlugin({
- analyzerMode: 'disabled',
- generateStatsFile: true,
- statsOptions: { source: false }
- }),
- ]
- }
Editor
You can edit this paste and save as new: