npm
installed, run npm init -y
in the <plugin root>src/Resources/app/administration/
folder or the <plugin root>src/Resources/app/storefront/
folder. This command creates a package.json
file in the respective folder, depending on the environment you're working in. To add a package to the package.json
file simply run the npm install
command. In this example we will be installing missionlog
.missionlog
, run npm install missionlog
in the folder you have created your package.json
file in.bundle.js
to be shipped to a browser. So in order to make Webpack aware of the new dependency, we have to register it and give it an alias/pseudonym so that the package can be bundled correctly.Resources/app/storefront
or Resources/app/administration
. In this build folder we create a new file with the name webpack.config.js
. We thereby make it possible to extend the Webpack configuration of Shopware.join
and resolve
for the path module of Node.js. In the second line, we export a so-called arrow function. The build system from Shopware calls this function when either the administration or storefront is being built.missionlog
is given the prefix @
, so it is possible to recognize later on in the source files. We will use the result of the two functions of the path module previously imported as a value.join
to reflect the path to the package inside the node_modules
folder. The node_modules
folder contains all the packages that we have installed via npm install
. After we identified the relevant path to the package, we use the resolve
function to transform this path into an absolute path.destructuring
in the specified code. Through the use of the alias, we keep the paths short and recognize that this is an alias at first glance via the prefix.npm
dependencies you might want to create a service with them. Learn how to do that in this guide: How to add a custom-service​