webpack.base.conf.js
/* Base config:
========================================================================== */
const webpack = require('webpack')
const path = require("path");
const fs = require("fs");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {
VueLoaderPlugin
} = require("vue-loader");
// Main const. Feel free to change it
const PATHS = {
src: path.join(__dirname, "../src"),
dist: path.join(__dirname, "../dist"),
assets: "assets/"
};
// Pages const for HtmlWebpackPlugin
// see more: https://github.com/vedees/webpack-template/blob/master/README.md#html-dir-folder
const PAGES_DIR = PATHS.src;
const PAGES = fs
.readdirSync(PAGES_DIR)
.filter(fileName => fileName.endsWith(".html"));
module.exports = {
externals: {
paths: PATHS
},
entry: {
app: PATHS.src,
module: `${PATHS.src}/index.js`,
},
output: {
filename: `${PATHS.assets}js/[name].[contenthash].js`,
path: PATHS.dist,
publicPath: "/"
},
optimization: {
splitChunks: {
cacheGroups: {
vendor: {
name: "vendors",
test: /node_modules/,
chunks: "all",
enforce: true
}
}
}
},
module: {
rules: [{
// JavaScript
test: /\.js$/,
loader: "babel-loader",
exclude: "/node_modules/"
},
{
// Vue
test: /\.vue$/,
loader: "vue-loader",
options: {
loader: {
scss: "vue-style-loader!css-loader!sass-loader"
}
}
},
{
// Fonts
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
options: {
name: '[name].[ext]'
}
},
{
// images / icons
test: /\.(png|jpg|gif|svg)$/,
loader: "file-loader",
options: {
name: "[name].[ext]"
}
},
{
// scss
test: /\.scss$/,
use: [
"style-loader",
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true,
config: {
path: `./postcss.config.js`
}
}
},
{
loader: "sass-loader",
options: {
sourceMap: true
}
}
]
},
// formstyler
{
test: /FormStyler[\/\\]dist[\/\\]js[\/\\]jquery.formstyler.min.js/,
use: "imports-loader?jQuery=jquery,$=jquery,this=>window"
},
// imports-loader
{
test: require.resolve('imports-loader'),
use: "imports-loader?this=>window"
},
// pug
{
test: /\.pug$/,
loader: 'pug-loader',
options: {
pretty: true
}
},
{
// css
test: /\.css$/,
use: [
"style-loader",
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: true
}
},
{
loader: "postcss-loader",
options: {
sourceMap: true,
config: {
path: `./postcss.config.js`
}
}
}
]
}
]
},
resolve: {
alias: {
"~": PATHS.src,
vue$: "vue/dist/vue.js"
}
},
resolve: {
alias: {
"~": PATHS.src,
jquery$: "jquery/dist/jquery.js"
},
},
resolve: {
alias: {
"~": PATHS.src,
jquery$: "jquery-form-styler/dist/jquery.formstyler.js"
},
},
plugins: [
new HtmlWebpackPlugin({
template: `${PAGES_DIR}/assets/pages/index.pug`,
filename: './index.html'
}),
new HtmlWebpackPlugin({
template: `${PAGES_DIR}/assets/pages/reg.pug`,
filename: './reg.html'
}),
new HtmlWebpackPlugin({
template: `${PAGES_DIR}/assets/pages/roomdetails.pug`,
filename: './roomdetails.html'
}),
new HtmlWebpackPlugin({
template: `${PAGES_DIR}/assets/pages/searchroom.pug`,
filename: './searchroom.html'
}),
new HtmlWebpackPlugin({
template: `${PAGES_DIR}/assets/pages/signin.pug`,
filename: './signin.html'
}),
new VueLoaderPlugin(),
new MiniCssExtractPlugin({
filename: `${PATHS.assets}/css/[name].[contenthash].css`,
}),
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
"window.jQuery": 'jquery',
}),
new CopyWebpackPlugin([{
from: `${PATHS.src}/${PATHS.assets}img`,
to: `${PATHS.assets}img`
},
{
from: `${PATHS.src}/${PATHS.assets}fonts`,
to: `${PATHS.assets}fonts`
},
{
from: `${PATHS.src}/static`,
to: ""
},
]),
...PAGES.map(
page =>
new HtmlWebpackPlugin({
template: `${PAGES_DIR}${page}`,
filename: `./index.html`
}),
)
]
};
webpacl.build.conf.js
/* Build config:
========================================================================== */
const merge = require("webpack-merge");
const baseWebpackConfig = require("./webpack.base.conf");
const buildWebpackConfig = merge(baseWebpackConfig, {
mode: "production",
plugins: []
});
module.exports = new Promise((resolve, reject) => {
resolve(buildWebpackConfig);
});
webpack.dev.conf.js
/* Development config:
========================================================================== */
const webpack = require("webpack");
const merge = require("webpack-merge");
const baseWebpackConfig = require("./webpack.base.conf");
const devWebpackConfig = merge(baseWebpackConfig, {
mode: "development",
devtool: "cheap-module-eval-source-map",
devServer: {
contentBase: baseWebpackConfig.externals.paths.dist,
port: 8081,
overlay: {
warnings: true,
errors: true
}
},
plugins: [
new webpack.SourceMapDevToolPlugin({
filename: "[file].map"
})
]
});
module.exports = new Promise((resolve, reject) => {
resolve(devWebpackConfig);
});
index.js
const $ = require("jquery");
window.jQuery = $;
import ('jquery-form-styler');
$('input, select').styler();
Код ошибки
Uncaught TypeError: Cannot set property 'styler' of undefined
at Object.eval (VM38 jquery.formstyler.js:984)
at eval (VM38 jquery.formstyler.js:18)
at eval (VM38 jquery.formstyler.js:21)
at Object../node_modules/jquery-form-styler/dist/jquery.formstyler.js (vendors.f6326737456a8aa65816.js:90)
at __webpack_require__ (bootstrap:84)
at eval (VM37 index.js:32)
at Module../src/index.js (bootstrap:166)
at __webpack_require__ (bootstrap:84)
at Object.0 (bootstrap:166)
at __webpack_require__ (bootstrap:84)
В общем,проблема с подключением сторонних плагинов jquery к webpack конфигу,что бы я не вставил ,проблема одна и таже
