Module Introduction
Splitting into separate code we do have a disadvantage and the solution.
What is Webpack & Why do we need it?
Every request takes some time. See the waterfall in the network tab. Webpack helps us with this.
Also helps us minify or optimize our code.
With Webpack we no longer need an external server like “live-server.”
Installing Webpack & Important Dependencies
npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader
We install the “typescript” package to lock in a version of TS. The “ts-loader” package is to help Webpack bundle the TS files.
Adding Entry & Output Configuration
"target": "es5" // or es6
"module": "es2015"
"outDir":"dir"
// don't need root dir
Add the “webpack.confi.js” file.
const path = require('path')
module.exports = {
entry: './src/app.ts',
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
}
}
We remove all the “.js” file extensions from the imports now. Needed for native browser built-in functionality but we do not need now.
Adding TypeScript Support with the ts-loader Package
Tell Webpack what to do with the TS files it finds by adding a “module” property.
const path = require('path')
module.exports = {
entry: './src/app.ts',
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
devtool: 'inline-source-map',
module: {
rules: [
// css or images or other; see webpack docs
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
}
]
},
resolve: {
extensions: [".ts", ".js"]
}
}
In the “tsconfig.js” file set “sourceMap” to true and add a “devtool” property to the code above.
A simple way to use Webpack is to go to “package.json” file by creating a “script” called “build” and set to “webpack”
We will now be bundling and no longer have an http request for each file import.
Finishing the Setup & Adding webpack-dev-server
We want to add “webpack-dev-server” by adding this to the “build script” in the “package.json” file. In “webpack-dev-server” mode it keep the bundles file in memory and so your “dist” folder will remain empty. Alos, in order for use to be able to view our project on the local server we need to add a “publicPath” key.
We also want to set a “mode” key set to “development.”
const path = require('path')
module.exports = {
mode: "development",
entry: './src/app.ts',
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist"),
publicPath: "dist"
},
devtool: 'inline-source-map',
module: {
rules: [
// css or images or other; see webpack docs
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
}
]
},
resolve: {
extensions: [".ts", ".js"]
}
}
Adding a Production Workflow
For production we typically want a different workflow. We can add to the same file with an “if statement” or we can add an entirely separate “webpack.config.prod.js” file.
const path = require('path')
cosnt CleanPlugin = require('clean-webpack-plugin')
module.exports = {
mode: "production",
entry: './src/app.ts',
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "dist")
},
devtool: 'none',
module: {
rules: [
// css or images or other; see webpack docs
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/,
}
]
},
resolve: {
extensions: [".ts", ".js"]
}
plugins: [
//auto-deletes existing dist folder contents on rebuild
new CleanPlugin.CleanWebpackPlugin()
]
}
npm install --save-dev clean-webpack-plugin
Update your “build script” in the “package.json” file
"build":"webpack --config webpack.config.prod.js"
Wrap Up
Webpack is a very important tool to speed up our application. It is highly configurable. Checkout the Webpack documentation. Must-use in any modern project.
Useful Resources & Links