Answer the question
In order to leave comments, you need to log in
How to make friends jquery.matchHeight plugin with Webpack?
Good afternoon, I added the jquery.matchHeight plugin to the project.
The terminal shows the error "TypeError: Cannot set property 'matchHeight' of undefined"
package.json
{
"name": "mint",
"version": "4.17.2",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"prebuild": "rimraf public && npm install",
"build": "webpack --mode production --colors --progress",
"prestart": "rimraf public && npm install",
"start": "webpack-dev-server --mode development --hot --colors --progress"
},
"browserslist": [
"last 2 version",
"> 2%",
"maintained node versions",
"not dead"
],
"devDependencies": {
"@babel/core": "^7.4.4",
"@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
"@babel/plugin-proposal-optional-chaining": "^7.2.0",
"@babel/preset-env": "^7.4.4",
"autoprefixer": "^9.5.1",
"babel-loader": "^8.0.5",
"css-loader": "^2.1.1",
"cssnano": "^4.1.10",
"file-loader": "^3.0.1",
"glob": "^7.1.4",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^3.0.6",
"image-webpack-loader": "^4.6.0",
"mini-css-extract-plugin": "^0.6.0",
"node-sass": "^4.12.0",
"postcss-loader": "^3.0.0",
"rimraf": "^2.6.3",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^2.1.2",
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-server": "^3.3.1",
"yargs": "^13.2.2"
},
"dependencies": {
"babel-polyfill": "^6.26.0",
"jquery": "^3.4.1",
"jquery-match-height": "^0.7.2",
"lodash": "^4.17.11"
}
}
const webpack = require('webpack');
const path = require('path');
const glob = require('glob');
const argv = require('yargs').argv;
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const isDevelopment = argv.mode === 'development';
const isProduction = !isDevelopment;
const distPath = path.join(__dirname, '/public');
const config = {
entry: {
main: './src/js/index.js'
},
output: {
filename: 'main.js',
path: distPath
},
module: {
rules: [{
test: /\.html$/,
use: 'html-loader'
}, {
test: /\.js$/,
exclude: /node_modules/,
use: [{
loader: 'babel-loader'
}]
}, {
test: /\.scss$/,
exclude: /node_modules/,
use: [
isDevelopment ? 'style-loader' : MiniCssExtractPlugin.loader,
'css-loader',
{
loader: 'postcss-loader',
options: {
plugins: [
isProduction ? require('cssnano') : () => {},
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
}
},
'sass-loader'
]
}, {
test: /images[\\\/].+\.(gif|png|jpe?g|svg)$/i,
use: [{
loader: 'file-loader',
options: {
name: 'images/[name][hash].[ext]'
}
}, {
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 70
}
}
},
],
}, {
test: /fonts[\\\/].+\.(otf|eot|svg|ttf|woff|woff2)$/i,
use: {
loader: 'file-loader',
options: {
name: 'fonts/[name][hash].[ext]'
}
},
}]
},
plugins: [
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery'
}),
new MiniCssExtractPlugin({
filename: '[name].css',
chunkFilename: '[id].css'
}),
...glob.sync('./src/*.html')
.map(htmlFile => {
return new HtmlWebpackPlugin({
filename: path.basename(htmlFile),
template: htmlFile
});
})
],
optimization: isProduction ? {
minimizer: [
new UglifyJsPlugin({
sourceMap: true,
uglifyOptions: {
compress: {
inline: false,
drop_console: true
},
},
}),
],
} : {},
devServer: {
contentBase: distPath,
port: 9000,
compress: true,
open: true
}
};
module.exports = config;
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question