Migrate from bower to npm & webpack

Potentially outdated
This post is older than 365 days and may be outdated. Please use the site-search to search for updated information.
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.
{{ 'Comments (%count%)' | trans {count:count} }}
{{ 'Comments are closed.' | trans }}