I am new to Node Js and Webpack. I tried to start a project with module-loaders.
Firstly, I installed nodeJs and NPM and created a new directory called tutorial
. I used the command prompt to cd into this directory and then ran the following command npm init
and then installed webpack via npm
using the command below :
npm install -S webpack
The 1st command installed webpack locally into the project under the 'node-modules' directory and I can run my project by doing this:
nodejs node-modules/webpack/bin/webpack.js
The problem with this is that I have to place my webpack.config.js
file inside of this directory which I want to place in my project root.
One solution to this problem was to install webpack globally on my machine which I did using the command below :
npm install -g webpack
This installed Webpack and now I do have a Webpack command. However, this command does not seem to be working or doing anything at all. When I try to run this from my project's root directroy it does not do anything at all (See Screenshot)
Please tell me what I am doing wrong!!
To run the local installation of webpack you can access its binary version as node_modules/. bin/webpack . Alternatively, if you are using npm v5. 2.0 or greater, you can run npx webpack to do it.
The "webpack" command is used to transpile all the JavaScript down into one file. It runs React local development server. It is a module bundler.
It is mostly used to manage JavaScript codebases, most often for usage in the browser, and requires Node. js to use. To answer question : Webpack (and all its associated plugins) is on npm (https://www.npmjs.com/package/webpack).
webpack
is not only in your node-modules/webpack/bin/
directory, it's also linked in node_modules/.bin
.
You have the npm bin
command to get the folder where npm will install executables.
You can use the scripts
property of your package.json
to use webpack from this directory which will be exported.
"scripts": { "scriptName": "webpack --config etc..." }
For example:
"scripts": { "build": "webpack --config webpack.config.js" }
You can then run it with:
npm run build
Or even with arguments:
npm run build -- <args>
This allow you to have you webpack.config.js
in the root folder of your project without having webpack globally installed or having your webpack configuration in the node_modules
folder.
You can run npx webpack
. The npx command, which ships with Node 8.2/npm 5.2.0 or higher, runs the webpack binary (./node_modules/.bin/webpack) of the webpack package. Source of info: https://webpack.js.org/guides/getting-started/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With