Javascript 网页包多入口点混淆

从我对webpack的多入口点的初步理解来看，例如

entry: {
    a: "./a",
    b: "./b",
    c: ["./c", "./d"]
},
output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].entry.js"
}

它将它们捆绑为a.entry.js、b.entry.js和c.entry.js。没有d.entry.js，因为它是c的一部分

然而在工作中，这些价值观让我非常困惑。为什么该值是http链接而不是文件

app: [
  'webpack/hot/dev-server',
  'webpack-dev-server/client?http://localhost:21200',
  './lib/index.js'
],
test: [
  'webpack/hot/dev-server',
  'webpack-dev-server/client?http://localhost:21200',
  './test/test.js'
]

---

正如在对该问题的评论中所述，HTTP URL用于webpack dev服务器及其热加载模块。但是，您希望将这些模块用于捆绑包的生产版本，因为您不需要热加载，而且它可以使捆绑包轻松地超过10.000行代码

出于海报的个人兴趣，这里是一个示例，用于我的一个名为dragJs的项目

// file: webpack.production.babel.js
import webpack from 'webpack';
import path from 'path';

const ROOT_PATH = path.resolve('./');

export default {
    entry: [
        path.resolve(ROOT_PATH, "src/drag")
    ],
    resolve: {
        extensions: ["", ".js", ".scss"]
    },
    output: {
        path: path.resolve(ROOT_PATH, "build"),
        filename: "drag.min.js"
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                include: path.resolve(ROOT_PATH, 'src')
            },
            {
                test: /\.scss$/,
                loader: 'style!css!sass'
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
};

有几件事：

我只使用一个入口点，但您可以使用多个入口点，就像您在示例中所做的那样 入口点仅指我的js文件-没有用于生产的Web包开发服务器 配置文件是使用ECMAScript 2015编写的，因此名称为*.babel.js 它使用sourcemaps和一个丑陋的优化插件 babel加载程序的预设在my.babelrc文件中指定 通过webpack-p-config./webpack.production.babel.js使用此配置运行webpack

---

如果还有其他问题，我将非常感谢在评论中回答。

正如在对该问题的评论中所述，HTTP URL用于webpack dev server及其热加载模块。但是，您希望将这些模块用于捆绑包的生产版本，因为您不需要热加载，而且它可以使捆绑包轻松地超过10.000行代码

出于海报的个人兴趣，这里是一个示例，用于我的一个名为dragJs的项目

// file: webpack.production.babel.js
import webpack from 'webpack';
import path from 'path';

const ROOT_PATH = path.resolve('./');

export default {
    entry: [
        path.resolve(ROOT_PATH, "src/drag")
    ],
    resolve: {
        extensions: ["", ".js", ".scss"]
    },
    output: {
        path: path.resolve(ROOT_PATH, "build"),
        filename: "drag.min.js"
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                test: /\.js$/,
                loader: 'babel',
                include: path.resolve(ROOT_PATH, 'src')
            },
            {
                test: /\.scss$/,
                loader: 'style!css!sass'
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
};

有几件事：

我只使用一个入口点，但您可以使用多个入口点，就像您在示例中所做的那样 入口点仅指我的js文件-没有用于生产的Web包开发服务器 配置文件是使用ECMAScript 2015编写的，因此名称为*.babel.js 它使用sourcemaps和一个丑陋的优化插件 babel加载程序的预设在my.babelrc文件中指定 通过webpack-p-config./webpack.production.babel.js使用此配置运行webpack

---

如果还有其他问题，请在评论中回答。

您所指的http链接是指为您的捆绑包提供服务的Web包开发服务器a开发服务器。这些链接用于将热加载脚本包含到包中。它们只能用于开发。对于生产，您可能会忽略它们，因为您不希望热加载脚本出现在prod文件中。我有兴趣查看用于生产的webpack.config.js。谢谢你分享这条建议您所指的http链接指的是用于为捆绑包提供服务的Web包开发服务器。这些链接用于将热加载脚本包含到包中。它们只能用于开发。对于生产，您可能会忽略它们，因为您不希望热加载脚本出现在prod文件中。我有兴趣查看用于生产的webpack.config.js。谢谢你分享这条建议