Webpack bundles my files in the wrong order (CommonsChunkPlugin)

by

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: "https://stackoverflow.com/questions/42988320/vendor.bundle.js"
    }),

    new webpack.optimize.UglifyJsPlugin(),
  ],
};

What magic is happening here?

  1. Webpack creates vendor.bundle.js by minifying & bundling my vendor
    files which now execute in the global context.
  2. Webpack creates bundle.js with all of its application code

entry file (app.jsx in this case)

import './script';

This script is just custom JavaScript that uses jQuery, Bootstrap, Tether and wowjs. It executes after vendor.bundle.js, allowing it to run successfully.

A mistake I made trying to execute my script.js was that I thought it had to be in the global context. So I imported it with script-loader like this: import './script-loader!script';. In the end, you don’t need to because if you’re importing through your entry file it will end up in the bundle file regardless.

Everything is all good.

Thanks @Ivan for the script-loader suggestion. I also noticed that the CommonsChunkPlugin was pulling the non-minified vendor versions so I chained uglify-loader into the process.

Although, I do believe some .min.js are created differently to get rid of extra bloat. Though that is for me to figure out. Thanks!

More Related Contents:

  1. Define global variable with webpack
  2. webpack dynamic module loader by require
  3. Output an ES module using webpack
  4. What should I do to use this webpacked JS library? [closed]
  5. Passing environment-dependent variables in webpack
  6. “You may need an appropriate loader to handle this file type” with Webpack and Babel
  7. Calling webpacked code from outside (HTML script tag)
  8. Resolving require paths with webpack
  9. Angular 2: import external js file into component
  10. How to load image files with webpack file-loader
  11. Static image src in Vue.js template
  12. What does “publicPath” in Webpack do?
  13. Using require(‘…’) with a variable vs. using a string in webpack
  14. How to bundle vendor scripts separately and require them as needed with Webpack?
  15. Rails: Webpacker 4.2 can’t find application in /app/public/packs/manifest.json heroku
  16. Error: Missing class properties transform
  17. webpack –watch isn’t compiling changed files
  18. Webpack Express Cannot Resolve Module ‘fs’, Request Dependency is Expression
  19. Module not found: Error: Can’t resolve vue, path not correct
  20. In the `import` syntax of ES6, how is a module evaluated exactly?
  21. Babel 7 – ReferenceError: regeneratorRuntime is not defined
  22. Path aliases for imports in WebStorm
  23. HtmlWebpackPlugin injects relative path files which breaks when loading non-root website paths
  24. Node JS and Webpack Unexpected token
  25. Import ES module in Next.js ERR_REQUIRE_ESM
  26. Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module ‘babel-preset-react’
  27. Conflict: Multiple assets emit to the same filename
  28. How to disable ESLint in vue-cli?
  29. Rails 5/6: How to include JS functions with webpacker?
  30. Solution: load independently compiled Webpack 2 bundles dynamically [closed]

Leave a Comment