Migrate from bower to npm & webpack

As bower is no longer maintained, you should consider switching to an alternative tool if you set up a new project.

In this article I'm going to show you, how to do that. Don't be scared - it's pretty simple.

Check out bower's config

In your first step you should check out bower.json and .bowerrc.

Alright - in this example we are using "cookieconsent": "*" as a dependency; all files that are fetched by bower have been stored in app/assets.

Now we need to create or extend a file called package.json. To fetch the package using npm we should add cookieconsent as a dependency. We also need the plugin copy-webpack-plugin. To do that, add the following.

  "dependencies": {
    "cookieconsent": "*",
    "copy-webpack-plugin": "^4.0.1"
  },

The file package.json is looking like this now (this example is from my extension spqr/cookiewarning - the content could be a bit different in your case):

{
  "name": "spqr-cookiewarning",
  "scripts": {
    "archive": "webpack -p && composer archive --format=zip"
  },
  "dependencies": {
    "cookieconsent": "*",
    "copy-webpack-plugin": "^4.0.1"
  },
  "devDependencies": {
    "babel-core": "^6.23.1",
    "babel-loader": "^6.1.0",
    "babel-plugin-transform-runtime": "^6.1.2",
    "babel-preset-env": "^1.1.8",
    "babel-preset-es2015": "^6.22.0",
    "babel-runtime": "^6.0.0",
    "vue-hot-reload-api": "^1.2.0",
    "vue-html-loader": "^1.0.0",
    "vue-loader": "^8.2.0",
    "vue-style-loader": "^1.0.0",
    "css-loader": "*",
    "webpack": "^1.12.9"
  }
}

Alright. Now we can install all packages using npm install command.

Copy files using webpack

Now you can extend the file webpack.config.js and tell webpack where to copy the downloaded files.

First of all, add this to webpack.config.js:

const CopyWebpackPlugin = require ('copy-webpack-plugin');

After you did so, you can add the plugin:

        plugins: [
            new CopyWebpackPlugin ([
                {
                    from: './node_modules/cookieconsent/build',
                    to: './app/assets/cookieconsent'
                }
            ], {
                ignore: [
                    '*.txt'
                ],
                copyUnmodified: true
            })
        ],

As you can see, all files from ./node_modules/cookieconsent/build are being copied to ./app/assets/cookieconsent.

In my case the full configuration of webpack looks like this:

const CopyWebpackPlugin = require ('copy-webpack-plugin');
const path = require ('path');

module.exports = [
    {
        entry: {
            "cookiewarning-settings": "./app/components/cookiewarning-settings.vue"
        },
        output: {
            filename: "./app/bundle/[name].js"
        },
        plugins: [
            new CopyWebpackPlugin ([
                {
                    from: './node_modules/cookieconsent/build',
                    to: './app/assets/cookieconsent'
                }
            ], {
                ignore: [
                    '*.txt'
                ],
                copyUnmodified: true
            })
        ],
        module: {
            loaders: [
                {test: /\.vue$/, loader: "vue"},
                {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
            ]
        }
    }

];

If you are now running webpack, all files are being copied.

That's it.

Written by Roman on {{ "2018-01-19T10:47:48+00:00" | date "longDate" }}