Как использовать динамический импорт в webpack 4?

Question

[Игорь Мясников]

Добрый день
Не могу понять как использовать динамический импорт в webpack
Использую Gulp + Webpack для сборки

WebpackConfig

const webpack = require('webpack');
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
	entry: {
		main: './src/js/index.js',
		gallery: './src/js/import/pages/gallery.js',
	},
	output: {
		filename: '[name].[chunkhash].js',
		chunkFilename: 'chunks/[name].[chunkhash].js',
		publicPath: '/',
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				use: {
					loader: 'babel-loader',
					query: {
						presets: [
							[
								'@babel/preset-env',
								{
									modules: false,
									targets: {
										node: 'current',
									},
									useBuiltIns: false,
								},
							],
						],
					},
				},
			},
		],
	},
	devtool: 'eval-source-map',
	resolve: {
		alias: {
			'%modules%': path.resolve(__dirname, 'src/blocks/modules'),
			'%components%': path.resolve(__dirname, 'src/blocks/components'),
		},
	},
	optimization: {
		minimizer: [new TerserPlugin()],
		splitChunks: {
			cacheGroups: {
				vendor: {
					test: /node_modules/,
					chunks: 'initial',
					name: 'vendor',
					enforce: true,
				},
			},
		},
	},
};

Триггер на загрузку

const trigger = document.querySelector('.btn--write-us');

function changeAria() {
	this.setAttribute('aria-expanded', 'true');
}

trigger.addEventListener('click', changeAria);
trigger.addEventListener('click', () => {
	import(/* webpackChunkName: "Choices" */ './../../components/select/select')
		.then((lazyModule) => {
			console.log(lazyModule);
		})
		.catch((error) => 'Ошибка при загрузке модуля Choices');
	import(/* webpackChunkName: "modal" */ './../../components/modal/modal')
		.then((lazyModule) => {
			console.log(lazyModule);
		})
		.catch((error) => 'Ошибка при загрузке модуля Modal');
});

Choices module

import * as Choices from 'choices.js';

/* eslint-disable no-undef */
let inputSelect = () => {
	const select = document.querySelectorAll('.field-select__select');

	if (select) {
		// eslint-disable-next-line no-new
		new Choices('.field-select__select', {
			searchEnabled: true,
			searchChoices: true,
			searchFloor: 2,
			searchResultLimit: 4,
			placeholderValue: 'Выберите',
			itemSelectText: '',
		});
	}
};
inputSelect();

Modal module

import MicroModal from 'micromodal';
// eslint-disable-next-line no-unused-vars
import SimpleBar from 'simplebar';
export const types = document.querySelector('.feedback-types');

export const content = document.querySelector('.modal__content');
export const modalLine = document.querySelector('.modal__line');

MicroModal.init({
	onClose: () => {
		const trigger = document.querySelector('.btn--write-us');

		trigger.setAttribute('aria-expanded', 'false');
	},
	openTrigger: 'data-custom-open',
	disableScroll: true,
	disableFocus: false,
	awaitCloseAnimation: true,
});

@babel/plugin-syntax-dynamic-import установлен и прописан в .babelrc

babelrc

module.exports = {
	presets: [
		require.resolve("@babel/preset-env")
	],
	plugins: ["@babel/plugin-syntax-dynamic-import"]
};

После нажатии на кнопку должны подгружаться import' ы из modal.js и инициализироваться сама модалка, а также импорты из select.js.

При этом отледьные файлы js создаются для модуля Choices, но при клики на триггер не загружаются. А файлы для модуля Modal не создаются вовсе

Comments

[Robur]

Все хорошо, но вы забыли упомянуть в чем проблема.
Если вы просто импорты не понимаете и хотите понять - для этого есть доки, там люди уже постарались и написали.
Если у вас что-то не работает - не стоит этого скрывать.