Webpack

## Part 1 - Very basic setup Build your own config for Webpack from the ground up. This post will hold your hand for the first 4 steps and you will see how to take it from there. As of Webpack 4, a config file is not needed so let's see how we can create a build. In your terminal, navigate to a folder you want to work in and type the following: `yarn init -y` `yarn add webpack webpack-cli --dev` In the root level create a folder `/dist` with a file `index.html` inside and another folder `/src` in the root level and add a `index.js` file inside it. Your file structure should look like the following: ```` |- package.json |- package-lock.json |- /dist |- index.html |- /src |- index.js``` ```` In your `package.json`, replace `"main": "index.js",` with `"private": true` to prevent it from publishing your package. Add basic HTML5 boiler plate to your `dist/index.html` file, it should look like this: ``` Webpack ``` As an example, add a console log to your `./src/index.js` ``` const greetings = "Hello World"; console.log(greetings); ``` This is all that is needed for a very basic build. Now run `yarn webpack` and you can see a new, compiled file `main.js` to appear in `./dist`. The content of the compiled file should look like the following: ``` console.log("Hello World"); ``` --- ## Part 2 - Adding a custom config file In the root level, add a file called `webpack-config.js` and then add the following configs: ``` import path from "path"; export default { entry: "./src/index.js", output: { path: path.resolve(__dirname, "dist"), filename: "main.js", }, }; ``` ## Part 3 - Add script command In your `package.json`, add the following command to the existing scripts (you should have `test` by default) ``` "build": "webpack --mode development" ``` Next time you need to run a build, you can use `yarn run build` instead of typing it all in the terminal. ## Part 4 - Add TypeScript Install dependancies ``` yarn add typescript ts-loader ts-node --dev ``` Add a new file `tsconfig.json` to the root level of the project and add the following configs: ``` { "compilerOptions": { "target": "ESNEXT", "module": "commonjs", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true, "resolveJsonModule": true } } ``` Then open your webpack-config and add the following below `output` ``` module: { rules: [ { test: /\.tsx?$/, use: "ts-loader", exclude: /node_modules/, }, ], }, resolve: { extensions: [".tsx", ".ts", ".js"], }, ``` Replace the entry file extension in your webpack-config to: ``` entry: path.resolve(__dirname, "src/index.ts") ``` Add a new file to `./src` named `index.ts`. You can now start to use this instead. This is all that is needed to create an initial configs for webpack and add support for typescript. If you have any questions, please leave a comment and I will get back to you. All the best at initialising webpack!

iwi4a_24

First steps in initialising Webpack and Typescript

Join Our Newsletter. No Spam, Only the good stuff.