Webpack binds my files in the wrong order (CommonsChunkPlugin)

Question

What I want is to merge my JavaScript provider files in a specific order through CommonsChunkPlugin from Webpack.

I am using CommonsChunkPlugin for Webpack. Using official documentation is straightforward and simple. It works as intended, but I think the plugin links my files in alphabetical order (maybe not so). There are no parameters for the plugin to indicate the order in which they should be connected.

Note. . For those new to Bootstrap 4, it currently requires a JavaScript library dependency called Tether. The sidewalk must be loaded before loading.

webpack.config.js

 module.exports = { entry: { app: './app.jsx', vendor: ['jquery', 'tether', 'bootstrap', 'wowjs'], }, output: { path: __dirname + '/dist', filename: 'bundle.js', }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }), new webpack.optimize.UglifyJsPlugin(), ], }; 

Two things happen here:

• vendor.bundle.js contains bootstrap , jquery , binding , wowjs
• bundle.js contains the rest of my application

The order of placement:
correct: jquery , tether , bootstrap , wowjs
wrong: bootstrap , jquery , tether , wowjs

Please note that in my webpack.config.js I ordered them exactly as they should, but they are connected in the wrong order. It doesn't matter if I randomly reorder them, the result will be the same.

After I use Webpack to build my application, vendor.bundle.js shows me the wrong order.

I know that they are connected incorrectly with Chrome. Tools tell me there are addiction issues. When I view a file with the tool and my IDE, it comes in the wrong order.

---

My other approach also led to the same release

I also tried import and require in my input file (in this case app.jsx) without using CommonChunkPlugin , and also for some reason loads my JavaScript libraries in alphabetical order.

webpack.config.js

 module.exports = { entry: './app.jsx', output: { path: __dirname + '/dist', filename: 'bundle.js', }, plugins: [ new webpack.optimize.UglifyJsPlugin(), ], }; 

app.jsx (record)

 import './node_modules/jquery/dist/jquery.min'; import './node_modules/tether/dist/js/tether.min'; import './node_modules/bootstrap/dist/js/bootstrap.min'; import './node_modules/wowjs/dist/wow.min'; 

or

 require('./node_modules/jquery/dist/jquery.min'); require('./node_modules/tether/dist/js/tether.min'); require('./node_modules/bootstrap/dist/js/bootstrap.min'); require('./node_modules/wowjs/dist/wow.min'); 

Result?
Bootstrap> jQuery> Tether> wowjs

---

How do I upload my vendor files in the correct order?

Answer 1

You can try https://webpack.js.org/guides/shimming/#script-loader - it looks like it will execute the scripts in order and in a global context.

Answer 2

Success!

webpack.config.js

 module.exports = { entry: { app: './app.jsx', vendor: [ "script-loader!uglify-loader!jquery", "script-loader!uglify-loader!tether", "script-loader!uglify-loader!bootstrap", "script-loader!uglify-loader!wowjs", ] }, output: { path: __dirname + '/dist', filename: 'bundle.js', }, plugins: [ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js' }), new webpack.optimize.UglifyJsPlugin(), ], }; 

What is the magic here?

• Webpack creates vendor.bundle.js , reducing and merging my provider files that are now running in a global context.
• Webpack creates bundle.js with all its application code

---

record file (app.jsx in this case)

 import './script'; 

This script is just custom JavaScript that uses jQuery, Bootstrap, Tether and wowjs. It runs after vendor.bundle.js , which allows it to work successfully.

The error I tried to execute script.js was that I thought it should be in a global context. So I imported it using script -loader as follows: import './script-loader!script'; . In the end, you do not need it, because if you import through your input file, it will end up in the package file.

---

Things are good.

Thanks to @Ivan for the script-loader suggestion. I also noticed that CommonsChunkPlugin pulled out unreasonable versions of the vendor, so I bound uglify-loader to the process.

Although, I believe that some .min.js are created in different ways to get rid of excess bloating. Although it is for me to understand. Thanks!