Webpack 多入口点混淆答案

【问题标题】：Webpack multiple entry point confusionWebpack 多入口点混淆
【发布时间】：2016-01-06 01:32:48
【问题描述】：

从我对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 链接指的是 webpack-dev-server（为您的包提供服务的开发服务器）。这些链接用于将热加载脚本包含到您的包中。它们应该只用于开发。对于生产，您可以忽略它们，因为您不希望热加载脚本出现在您的产品文件中。
我有兴趣看到用于生产的 webpack.config.js。感谢您分享该提示。 :)

标签： javascript webpack webpack-dev-server

【解决方案1】：

正如对该问题的评论中所述，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 文件 - 没有 webpack-dev-server 用于生产
配置文件是使用 ECMAScript2015 编写的（因此名称为 *.babel.js）
它使用 sourcemaps 和一个 uglify 优化插件
babel-loader 的预设在我的.babelrc 文件中指定
通过webpack -p --config ./webpack.production.babel.js 使用此配置运行 webpack

如果还有其他问题，我会很感激在 cmets 中回答。

【讨论】：