Webpack多入口点混淆

正如在对该问题的评论中所述,HTTP URL用于webpack dev服务器及其热加载模块。但是,您希望在bundle的生产版本中省略这些模块,因为您不需要热加载,而且它可以使您的bundle轻松地超过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服务器
• 配置文件使用ECMAScript2015编写(因此命名为 *.babel.js )
• 它使用sourcemaps和一个丑陋的优化插件
• babel加载器的预设值在我的 .babelrc 文件
• 使用此配置通过运行webpack webpack -p --config ./webpack.production.babel.js

如果还有其他问题,我很乐意在评论中回答。