D
D
Denis Lopatin @Denis2020-12-06 13:04:16
webpack
Denis Lopatin @Denis, 2020-12-06 13:04:16

Why is part of the site functionality falling off in the production mode of webpack?

There is a tutorial site where I mostly get to know webpack. The bottom line is, the site uses the materialize library and everything works in the development build, but it’s worth doing a production build, as part of the functionality will fall off (and not a significant part of the UI, for example, the text will stop disappearing from the input on click, etc.) There are 0 build errors in the console and in the browser. With what it can be connected in general? Well, how can a prod mod take and dump from a third-party script (inputs are initialized using materialize and classes are added on click, also using it) part of the functionality and at the same time display an empty console like everything is okay.

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;

module.exports = {
    mode: 'development',
    target: process.env.NODE_ENV === "development" ? "web" : "browserslist",
    context: path.resolve(__dirname, 'src'),
    entry: {
        polyfill: '@babel/polyfill',
        main: path.resolve(__dirname, 'src/scripts', 'index.js')
    },
    output: {
        filename: '[name].[contenthash].js',
        path: path.resolve(__dirname, 'dist'),
    },
    devtool: isDev ? 'inline-source-map' : false,
    devServer: {
        publicPath: '/',
        contentBase: path.join(__dirname, 'dist'),
        compress: true,
        port: 9000,
        open: true,
        watchContentBase: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.s[ac]ss$/i,
                use: [
                    isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.css$/i,
                use: [
                    isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
                    'css-loader'
                ],
            },
            {
                test: /\.m?js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.(ttf|eot|svg|png|jpg|gif|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader'
            },
            {
                test: /\.(woff|woff2|eot|ttf|otf)$/i,
                type: 'asset/resource',
            },
        ],
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: path.resolve('src', 'index.html'),
        }),
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].style.css',
        })
    ],
    optimization: {
        minimize: isProd,
        minimizer: [
            new CssMinimizerPlugin()
        ],
    }
}


{
  "name": "avia_tickets",
  "version": "1.0.0",
  "description": "Avia tickets application for web",
  "main": "index.js",
  "scripts": {
    "dev": "cross-env NODE_ENV='development' webpack --mode=development",
    "prod": "cross-env NODE_ENV='production' webpack --mode=production",
    "start": "cross-env NODE_ENV='development' webpack serve"
  },
  "browserslist": [
    "last 2 version",
    "> 1%"
  ],
  "author": "Denis Lopatin",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/preset-env": "^7.12.7",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "cross-env": "^7.0.3",
    "css-loader": "^5.0.1",
    "css-minimizer-webpack-plugin": "^1.1.5",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.2",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.9.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "axios": "^0.21.0",
    "materialize-css": "^1.0.0-rc.2"
  }
}

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question