首页 文章

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

提问于
浏览 次
0

在我的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”，那么webpack构建将崩溃 .

我错过了一个webpack配置吗？

编辑：文件夹结构：

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

1 回答

  • 0

    您不必处理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']
  },

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

    回复于

相关问题