Webpack - 动态需求和路径答案

【问题标题】：Webpack - dynamic require and pathsWebpack - 动态需求和路径
【发布时间】：2015-08-07 18:10:29
【问题描述】：

我的 webpack.config 文件如下所示

var path = require('path');
var webpack = require('webpack');

module.exports = {
    entry: {
        app: './app'
    },
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name]-bundle.js'
    }
};

我有一些看起来像这样的动态需求

function loadModule(modName, cb, onErr){
    if (modName == 'contacts') require(['../modules/contacts/contacts', 'html!../modules/contacts/contacts.htm'], cb);
    else if (modName == 'tasks') require(['../modules/tasks/tasks', 'html!../modules/tasks/tasks.htm'], cb);
    else onErr();
}

效果很好。我看到1.1-bundle.js 和2.2-bundle.js 被添加到我的构建文件夹中。

问题是，当这些动态需求被触发时，我在我的网络选项卡中看到 404，因为 webpack 试图从我的项目的根目录加载 1-1.bundle.js，而不是构建文件夹我告诉 webpack 把它放上去。

我该如何纠正这个问题？

【问题讨论】：

标签： javascript webpack

【解决方案1】：

您可能需要设置public path- 基本上，您告诉 webpack 它会在您的网络服务器上的哪个位置找到构建的文件，这对您来说似乎是构建文件夹。

{
    output: {
        path: path.resolve(__dirname, 'build'),
        filename: '[name]-bundle.js',
        publicPath: '/build/',
    },
}

【讨论】：