Gulp to Webpack migration on an old website - generating vendors from non-npm dependencies

Question

We want to migrate from gulp to webpack on a rather big and old website. Gulp just concat and minify JS & CSS files at the moment. I want to migrate to webpack because another front dev made some react modules that are compiled by browserify cmd in another folder:

we work in a webapp/ folder, minified files are located here :

js/app.min.js
jslib/vendors.min.js
css/app.min.css

sources files are :

js/
  file1.js
  file2.js
  ...
jslib/
  jquery-1.11.2.min.js
  jquery.fancybox.js
  ...
  jquery.very-old-dependency-not-on-npm.min.js

css/
  style.css
  extra.css

my goal is to keep this file split for javascript by using two files, app.js and vendors.js. These 2 files should be, ideally, ES6 files that import other files.

Actually i'm looking for a way to do a simple concatenation / minification of JS files through the 2 es6 files with imports. Webpack is checking for dependencies and to overcome the "jquery is not defined" errors i added the webpack.providePlugin and the resolve.alias part in webpack.config. But this loads jquery in my app.min.js file and i don't want it for performance purposes. I'm aware that all libs should be npm installed and required/imported in es6 context for an optimized webpack use, but some old jquery libs are not available on npm in the version i want so i have to go with the files already in the project.

vendors.js :

import "./jquery-1.11.2.min.js";
import "./jquery.fancybox.js"

app.js :

import "./file1.js"
import "./file2.js"

webpack.config.js

const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
    '/../../js/app': path.resolve(__dirname + '/../../js/app.js'),
    '/../../jslib/vendors': path.resolve(__dirname + '/../../jslib/vendors.js'),
  },
  output: {
    path: path.resolve(__dirname),
    filename: '[name].min.js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery'
    }),
  ],
  resolve: {
    alias: {
      jquery: path.resolve(__dirname+'/../../jslib/jquery-1.11.2.min.js')
    },
  },
}

all my paths are ok (the folder location of the current gulp / future webpack is not in assets folder ) and webpack is successfully running, i just want to find a clean way to perform a simple concat / minify without including jquery in my app file before going further.

score 1 · Answer 1 · answered Mar 10 '20 at 11:39

1

Here is an example of using jquery in an html file external As for the names of app and vendors, you must change this part

entry: {
  '/../../js/app': path.resolve(__dirname + '/../../js/app.js'),
  '/../../jslib/vendors': path.resolve(__dirname + '/../../jslib/vendors.js'),
},

for this

entry: {
  app: path.resolve(__dirname + '/../../js/app.js'),
  vendors: path.resolve(__dirname + '/../../jslib/vendors.js'),
},

Do not add jquery to import if you want it to be added from outside. Remove jquery from vendors.js

I hope I helped.

answered Mar 10 '20 at 11:39

Grzegorz T.

3,903
2
11
24

the name part can looks weird but it's a webpack syntax for different entries paths : https://stackoverflow.com/a/45278943/1409885 the external inclusion of jquery throws me back to the step where jquery wasn't defined :( Actually jQuery works but i can't use any modules without a manual include or the use of this kind of loader : https://github.com/webpack-contrib/imports-loader i'm looking for a more maintanable solution to go further in webpack transition, no maintenance in webpack.config.js if i want to add a vendor – SupFrig Mar 10 '20 at 14:46

Gulp to Webpack migration on an old website - generating vendors from non-npm dependencies

1 Answers1