Multiple subpages using webpack

Question

I have multiple subpages on a site that uses webpack and grunt. Here is my webpack configuration in my Gruntfile.js.

I would like to use webpack to handle all of the subpage JS files.

    webpack: {
        dev: {
            entry: {
                test: "./src/js/test.js",
                index: "./src/js/index.js",
            },
            output: {
                path: 'dist/js/',
                filename: '[name].js',
                chunkFilename: '[id].[hash].chunk.js',
                publicPath: 'js/'
            },
            plugins: [
                new webpack.SourceMapDevToolPlugin('[file].map', null, '[absolute-resource-path]', '[absolute-resource-path]')
            ]
        },
        prod: {
            entry: {
                test: "./src/js/test.js",
                index: "./src/js/index.js",
            },
            output: {
                path: 'dist/js/',
                filename: '[name].js',
                chunkFilename: '[id].[hash].chunk.js',
                publicPath: 'js/'
            },
            plugins: [
                new webpack.optimize.UglifyJsPlugin()
            ]
        }
    },

Is there a way to use a wildcard when specifying the entry names? So that any files inside js/ folder is considered an entry point? Also, I'm I configuring webpack correctly? And why is the chunkFileName needed? That seems to create unnecessary javascript. Also, how do I handle the case where there is a common JS for all subpages? There are specific JS files for some subpages, and a common JS file for all subpages.

I'm not sure you want to create a new entry point for each file. Usually, you have one or two entry points and webpack recursively pulls in all the required modules. You should be able use your test expression to assign different loaders to different filetypes. — 4m1r
– 4m1r, Commented Jan 8, 2016 at 19:11

typeoneerror · Accepted Answer · 2016-10-31 07:29:37Z

1

We had a setup with multiples entry-points as well.

Is there a way to use a wildcard when specifying the entry names? So that any files inside js/ folder is considered an entry point?

It’s node, you can use fs or anything you want to list files and create an object of entry points, following any convention you like.

Also, I'm I configuring webpack correctly?

Well, it depends on what you want to do… I don’t see any loaders so you don’t do transformation on files (like babel).

And why is the chunkFileName needed? That seems to create unnecessary javascript.

I don’t use it.

Also, how do I handle the case where there is a common JS for all subpages? There are specific JS files for some subpages, and a common JS file for all subpages.

You can use CommonsChunkPlugin for mutual code between pages. https://webpack.github.io/docs/code-splitting.html#split-app-and-vendor-code

edited Oct 31, 2016 at 7:29

typeoneerror

57.2k32 gold badges134 silver badges225 bronze badges

answered Feb 5, 2016 at 8:37

Boris Charpentier

3,55328 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Multiple subpages using webpack

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related