What is webpack?
Webpack is a static module loader that compiles your scripts into a bundle script you can load at the bottom of your html. This makes your scripts more efficient and smaller.
Why use webpack?
Webpack makes your scripts smaller more efficient into a bundle script. This can decrease your initial file load size. React and major frameworks will automatically compile your scripts but using webpack gives you more control over your scripts and a base understanding of how frameworks work under the hood.
Basics
Webpack is built for JavaScript
the config file name is
webpack.config.js
which means that webpack file is in JavaScript
webpack follows es5 JavaScript
the basic layout is contained in a
module.exports = {}All the info for webpack is inside the exports
Entry File
entry: "./src/index.js"this is the primary file for input but you can also use an array of many files
Target
target: "web"The target is typically web but it depends what you are looking for in the script bundle
Mode and Output
mode: "development",
output: {
path: "./build/js",
filename: "main.js",
},
Mode is for what you are currently doing with it. development will be less optimized but compile faster for development
The output is where the output file will be.
filename is the name of the complied file
resolve
extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],Input file Types are the extensions in the array
Module
module: {
rules: [
{
test: /\.(ts|tsx)$/,
loader: "awesome-typescript-loader",
},
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader",
},
],
},
};The module rules contain the loaders which actually compile your script. You can install these with npm
You will need a tsconfig.json file for handling typescript
Activation
In the package.json file of your script your can set the activation commands for webpack
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},npm run dev will run the dev build and compile your scripts
npm run build will make a optimized production build
You can create package.json with npm init -y in terminal
Comments