Есть учебный сайт, на котором я по большей части знакомлюсь в webpack'ом. Суть в чем, сайт использует библиотеку materialize и в development сборке все работает, но стоит сделать production сборку, как часть функционала отвалится ( причем не значительная часть UI, например текст перестанет исчезать с input по клику и прочее) В консоли 0 ошибок при сборке и в браузере. С чем это может быть вообще связано? Ну каким образом prod мод может взять и отвалить у стороннего скрипта ( инпуты инициализируются при помощи materialize и классы добавляют по клику тоже при помощи него) часть функционала и при этом вывести пустую консоль типо все окей.
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"
}
}