• Migrate from bower to npm & webpack

Migrate from bower to npm & webpack

Migrate from bower 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.

Migrate from bower .bowerrc

Migrate from bower bower.json

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.

Migrate from bower package.json Migrate from bower npm install

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"}
            ]
        }
    }

];

Migrate from bower webpack.config.js

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

Migrate from bower webpack Migrate from bower files copied

That's it.

{{ message }}

{{ 'Comments are closed.' | trans }}

Wait a second!

Did you know that there's are great support channels for Pagekit? Visit us today and sign up for free using email or your GitHub-, Twitter-, Google- or Facebook-Account.

Latest blog posts

Latest comments

Like my work?

If you would like to support my work, you are invited to do so.