**Course Title:** Modern JavaScript Programming: From Fundamentals to Full-Stack Development **Section Title:** Modern Tooling: Babel, Webpack, and npm **Topic:** Set up a basic Webpack project with Babel and npm dependencies.(Lab topic) **Objective:** In this lab, you will learn how to set up a basic Webpack project with Babel and npm dependencies. You will understand how to configure Webpack and Babel to work together, create a build process, and manage dependencies with npm. **Step 1: Create a new project folder and initialize npm** Create a new folder for your project and navigate into it in your terminal or command prompt. Run the following command to initialize a new npm project: ```bash npm init -y ``` This will create a `package.json` file in your project folder. **Step 2: Install Webpack and Babel dependencies** Install the required Webpack and Babel dependencies using the following command: ```bash npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env --save-dev ``` This command installs the following dependencies: * `webpack`: The Webpack bundler * `webpack-cli`: The Webpack command-line interface * `webpack-dev-server`: A development server for Webpack * `babel-loader`: A Webpack loader for Babel * `@babel/core`: The Babel core library * `@babel/preset-env`: A Babel preset for modern JavaScript environments **Step 3: Create a Webpack configuration file** Create a new file called `webpack.config.js` in your project folder. This file will contain the configuration for Webpack. ```javascript // webpack.config.js const path = require('path'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', }, module: { rules: [ { test: /\.js$/, use: ['babel-loader'], exclude: /node_modules/, }, ], }, devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 3000, }, }; ``` This configuration tells Webpack to: * Use `babel-loader` to transpile JavaScript files * Exclude `node_modules` from transpilation * Output the bundled code to a file called `bundle.js` in a `dist` folder * Use a development server on port 3000 **Step 4: Create a Babel configuration file** Create a new file called `.babelrc` in your project folder. This file will contain the configuration for Babel. ```json // .babelrc { "presets": ["@babel/preset-env"] } ``` This configuration tells Babel to use the `@babel/preset-env` preset, which allows us to use modern JavaScript features. **Step 5: Create an npm script** Open your `package.json` file and add the following script: ```json // package.json "scripts": { "build": "webpack", "start": "webpack-dev-server" } ``` This script tells npm to run Webpack when you run `npm run build` and start the development server when you run `npm run start`. **Step 6: Create a JavaScript file** Create a new file called `index.js` in a `src` folder. This file will contain the JavaScript code that we want to bundle. ```javascript // src/index.js console.log('Hello, world!'); ``` This code simply logs a message to the console. **Step 7: Run the application** Run the following command to start the development server: ```bash npm run start ``` This will start the development server and make your application available at `http://localhost:3000`. **Conclusion:** In this lab, you learned how to set up a basic Webpack project with Babel and npm dependencies. You created a Webpack configuration file, a Babel configuration file, and an npm script, and you wrote a simple JavaScript file that you bundled and ran in a development server. **External Links:** * Webpack documentation: [https://webpack.js.org/](https://webpack.js.org/) * Babel documentation: [https://babeljs.io/](https://babeljs.io/) * npm documentation: [https://docs.npmjs.com/](https://docs.npmjs.com/) **Comments and Questions:** If you have any questions or need help with this lab, please leave a comment below.