Ad

Webpack Multiple Entry Point Confusion

- 1 answer

From my initial understanding of webpack's multiple entry point such as

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

It will bundle them as a.entry.js, b.entry.js and c.entry.js. There is no d.entry.js since it's part of c.

However at work, these values are confusing me so much. Why is the value an http link and not a file?

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'
]
Ad

Answer

As already stated in a comment on the question, the HTTP URLs are used for webpack-dev-server and its hotloading module. However, you want to ommit those modules for the production version of your bundle, since you don't need the hotloading and it makes your bundle easily over 10.000 lines of code (additionally!).

For the personal interest of the poster, here is an example production config (minimalistic), for a project of mine (called 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()
    ]
};

A few things:

  • I only use one entry point, but you could use multiple, just as you do in your example
  • The entry point only refers to my js file - no webpack-dev-server for production
  • The config file is written using ECMAScript2015 (thus the name *.babel.js)
  • It uses sourcemaps and an uglify optimization plugin
  • The presets for the babel-loader are specified in my .babelrc file
  • Run webpack with this config via webpack -p --config ./webpack.production.babel.js

If there are any further questions, I would be grateful to answer them in the comments.

Ad
source: stackoverflow.com
Ad