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

Question

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

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

    print();
});

И в моем конфиге webpack я настроил это (кроме 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']
  },

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