importgives us a few benefits.
webpackcommand is run.
importstatement in the source
import, Webpack retrieves all dependency code. If the imported module depends on other modules, Webpack retrieves those modules too.
node index.js. A request is made to the server. The server responds with the compiled JS file in
webpack-demo).This is where all our files will live.
srcfolder. webpack's default entry point is the
index.jsfile in the
index.htmland add it to the root directory.
npx webpackin the terminal. Adding
npm run buildwill also do the same thing. You should see something like this in
dist, which contains a file called
main.js. This file contains the processed code from
<script src="./dist/main.js"><script>, to reference the new file that webpack has created for us.
index.htmlin your browser
webpack.config.js) that allows us to tell webpack what to do.
entry(line 5): refers to the entry point (the file that webpack starts reading from).
output(line 6): refers to where webpack will put the processed code (line 8) and what the file will be called (line 7). In this case, the file (
randomName.js) will be put in a directory called
RANDOM(The directory will be created if it does not exist). Usually we stick with convention and put a file called
main.jsin a folder called
path.resolve- resolves an absolute path to the directory called