Я использую Webpack для компиляции ES6 Javascript в моем веб-приложении. Я установил плагин ( Html5Sortable ) через NPM, и теперь он находится в моей папке node_modules.
Моя точка входа в Webpack ./src/app.js. В этом файле я вызываю другой класс ES6 с именем InputBoxPane:
import './InputBoxPane.scss';
import InputBoxPaneTemplate from './InputBoxPane.handlebars';
import 'html5sortable/dist/html5sortable.es.js';
export default class InputBoxPane {
// Other code
SetupDraggable() {
sortable('.input-element-container', {
forcePlaceholderSize: true,
placeholderClass: 'ph-class',
hoverClass: 'bg-maroon yellow'
});
}
}
Вы можете увидеть в строке 3, что я пытаюсь импортировать файл html5sortable, который существует в node_modules:
Я перепробовал каждое воплощение import html5sortable from 'html5sortable/dist/htmlsortable.es.js, которое вы можете себе представить.
Несмотря на то, что код компилируется, в моем браузере появляется сообщение об ошибке: «сортируемый файл не найден». Когда я ссылаюсь на файл Html5Sortable .js в старомодном теге, все работает нормально, поэтому создается впечатление, что файл не включен в мой комплект должным образом.
Вот мой webpack.config.js:
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin')
const autoprefixer = require('autoprefixer');
const isDevelopment = process.env.NODE_ENV !== 'production';
module.exports = {
entry: {
bundle: './src/app.js'
} ,
output: {
path: path.resolve(__dirname, '../dist')
},
devtool: isDevelopment && "source-map",
devServer: {
port: 3000,
open: true,
contentBase: path.join(__dirname, "../src"),
},
module: {
rules: [
{ test: /\.handlebars$/, loader: "handlebars-loader" },
{
test: /\.(scss|css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
options: {
sourceMap: isDevelopment,
minimize: !isDevelopment
}
},
{
loader: "postcss-loader",
options: {
autoprefixer: {
browsers: ["last 2 versions"]
},
sourceMap: isDevelopment,
plugins: () => [
autoprefixer
]
},
},
{
loader: "sass-loader",
options: {
sourceMap: isDevelopment
}
}
]
},
{
test: /\.(jpg|png|gif)$/,
use: [
{
loader: "file-loader",
options: {
name: '[name].[ext]',
outputPath: 'static/',
useRelativePath: true,
}
},
{
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: true,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
webp: {
quality: 75
}
}
}
]
}
]
},
plugins: [
/** Since Webpack 4 */
new webpack.LoaderOptionsPlugin({
options: {
handlebarsLoader: {}
}
}),
new MiniCssExtractPlugin({
filename: "[name]-styles.css",
chunkFilename: "[id].css"
}),
new HtmlWebpackPlugin({
title: 'My awesome service',
template: './src/index.handlebars',
minify: !isDevelopment && {
html5: true,
collapseWhitespace: true,
caseSensitive: true,
removeComments: true,
removeEmptyElements: true
},
})
]
};