so let’s import and use moment.js by directly importing it into our logger module. Webpack enable us to import and use any module. Now when we run the bundler with npm run build, and open our HTML in the browser, we see this: To use this module, we have to import it and call it in our entry point, which if you look back at the config file is index.js. We create a file called log.js and make it export a simple function: Let’s create a module that outputs to the console. For this tutorial we will use the ES6 import syntax. Webpack provides multiple ways to work with modules, and most of the time you are free to go with whichever one you like. This is the only script file that we will link in our HTML: After running webpack we will have all our JavaScript in a file called bundle.js. In output we specify the name and path of our bundle. There are many different strategies for configuring entry points but in most cases a single entry is enough. The entry option tells webpack which is our main JavaScript file. We can tell webpack what to do in a config file and that’ll allow us to use the command webpack without specifying the source (main.js) and the target (bundle.js) and this becomes more powerful when we add loaders and stuff and more configurations. The recommended way to do this is by creating a config file. The last part of the setup is to tell webpack which files to bundle up. Running npm run watch will start a process that automatically bundles our files when any of them change. Now by calling npm run build from the terminal we can make webpack bundle our files (the -p option stands for production and minifies the bundled code). Once we have it installed, it’s best to run webpack via a Node.js script.
#How to run webpack script terminal install
We assume that you nodejs installed and we will a package manager like npm or yarn to install webpack so let’s begin.Ĭreate a new directory and cd into it and create two files index.html and package.json and two directories assets and dist: Мost popular build tool according to the 2016 JavaScript survey.Hot Reload for quicker development with React, Vue.js and similar frameworks.
#How to run webpack script terminal code