Установите правильный путь для отложенной загрузки компонента с помощью Webpack - ES6

Question

В моем файле app.js есть следующее событие внутри функции, куда я импортирую другой модуль (такой же, как в документах), используя технику отложенной загрузки:

button.onclick = e => import(/* webpackChunkName: "print" */ './print').then(module => {
    var print = module.default;

    print();
});

И в моем конфиге веб-пакетаЯ настроил это (кроме Babel, загрузчиков SASS и т. Д.):

const path = require('path');

var ExtractTextPlugin = require ('extract-text-webpack-plugin');const UglifyJsPlugin = require ('uglifyjs-webpack-plugin');

module.exports = {
watch: true,
entry: {
    main: ['babel-polyfill', './src/js/app.js','./src/sass/main.sass']
},
output: {
    chunkFilename: '[name].bundle.js',
    path: path.resolve(__dirname, "dist"),
    filename: '[name].js',

},
module: {
    rules: [
        {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ["babel-preset-env", "babel-preset-stage-0"]
                }
            }
        },
        {
            test: /\.sass$/,
            exclude: /node_modules/,
            use: ExtractTextPlugin.extract({
                fallback: 'style-loader',
                use: [
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        query: {
                            sourceMap: false,
                        },
                    },
                ],
            }),
        },
    ]
}

}

Проблема в том, что путь "./print" находится в моей папке "src", а не вмоя папка "dist", в которую webpack помещает все пакеты, поэтому я получаю ошибку 404.Если я изменю путь на «./dist/print», то сборка веб-пакета будет аварийно завершена.

Мне не хватает конфигурации веб-пакета?

Редактировать: Структура папки:

src 
    js
        app.js
        print.js
dist
    main.bundle.js
    print.bundle.js

Answer 1

Вам не нужно обрабатывать путь модулей в папке dist, только в папке src.

Думаю, есть два решения:

1 / Укажите путь src в операторе импорта:

button.onclick = e => import(/* webpackChunkName: "print" */ './src/js/print').then(module => {
    var print = module.default;

    print();
});

2 / Лично я обычно добавляю папку src к разрешенным путям в файле конфигурации:

resolve: {
    modules: [
      path.resolve('./node_modules'),
      path.resolve('./src/js')
    ],
    extensions: ['.json', '.js']
  },

Ваш код должен работать без изменения строки.