CODEWITHSUNDEEP
javascriptwebpack
Dima Feldman
Dima Feldman

Reputation: 708

Webpack - how to bundle dependencies into a separate file that will be included along the "regular" output flow

I have a working webpack config file, that bundles my React application. my config utilizes webpack.ProvidePlugin and externals option that looks like this:

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM',
    'react-router': 'ReactRouter'
},
plugins: [
    new webpack.ProvidePlugin({
        React: 'react',
        ReactDOM: 'react-dom',
        ReactRouter: 'react-router'
    })]

What I'm trying to achieve is to be able to load React dependencies in one file, for instance react-with-deps.js and the actual application will reside in another file, my-app.js. this structure will allow me to add multiple react applications, with a centralized dependency file.

my-app.js is built just fine - without the externals.

What I'm missing is the react-with-deps.js files to be built from the externals list. I tried to include it as part of the output list, but it didn't work.

Will appreciate any clue for how to achieve that!

Upvotes: 1

Views: 3162

Answers (1)

Joe Clay
Joe Clay

Reputation: 35787

externals are modules that you're explicitly saying are not included in your Webpack build, so you can load them in from elsewhere (a <script> tag, etc). You can't build a file from them, that would defeat the entire point!

I think what you're looking for is CommonsChunkPlugin:

entry: {
   "my-app": "your app's entry file",
   "react-with-deps": [
       "react",
       "react-dom",
       "react-router"
   ]
},
output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js"
},
plugins: [
    new webpack.optimize.CommonsChunkPlugin({
        name: "react-with-deps",
        minChunks: Infinity
    })
]

Upvotes: 3

Related Questions