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（＆＃39; extract-text-webpack-plugin＆＃39;）; const UglifyJsPlugin = require（＆＃39; uglifyjs-webpack-plugin＆＃39;）;

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,
                        },
                    },
                ],
            }),
        },
    ]
}

}

问题是路径＆＃34; ./ print＆＃34;来自我的＆＃34; src＆＃34;文件夹，而不是我的＆＃34; dist＆＃34;文件夹，webpack放入所有包，所以我收到404错误。如果我将路径更改为＆＃34; ./ dist / print＆＃34;那么webpack构建就会崩溃。

我错过了网络包配置吗？

编辑：文件夹结构：

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

Answer 1

您不必处理dist文件夹中的模块路径，只能在src文件夹中处理。

我认为有两种解决方案：

1 /在import语句中指定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']
  },

您的代码应该可以在不更改行的情况下工作。

使用Webpack-ES6设置延迟加载组件的正确路径

1 个答案: