**Course Title:** Build and Package Management in Modern Development **Section Title:** Transpiling Modern JavaScript with Babel **Topic:** Integrate Babel into your Webpack project to transpile modern JavaScript. (Lab topic) **Introduction:** In the previous topics, we learned about the importance of transpiling modern JavaScript with Babel and how to configure Babel for a project. Now, we'll take it a step further by integrating Babel into a Webpack project. This integration will enable us to transpile our modern JavaScript code to ensure compatibility with older browsers. **Step 1: Install Babel and its dependencies** To start, we need to install Babel and its dependencies. Run the following commands in your terminal: ```bash npm install --save-dev @babel/core @babel/preset-env babel-loader ``` Here, we're installing the following packages: * `@babel/core`: The core Babel package. * `@babel/preset-env`: A preset that allows us to transpile modern JavaScript to older syntax. * `babel-loader`: A Webpack loader that enables us to use Babel with Webpack. **Step 2: Configure Babel in your Webpack project** Next, we'll create a `.babelrc` file in the root of our project. This file will contain our Babel configuration. Add the following code to the `.babelrc` file: ```json { "presets": ["@babel/preset-env"] } ``` Here, we're telling Babel to use the `@babel/preset-env` preset. **Step 3: Configure Webpack to use Babel** Now, let's configure Webpack to use Babel. Open your `webpack.config.js` file and add the following code: ```javascript module.exports = { // ... other configurations ... module: { rules: [ { test: /\.js$/, exclude: /node_modules/, use: 'babel-loader', }, ], }, }; ``` Here, we're telling Webpack to use the Babel loader for all JavaScript files (except those in the `node_modules` directory). **Step 4: Verify that Babel is working correctly** To verify that Babel is working correctly, let's create a test file called `index.js`. Add the following code to the file: ```javascript class Person { constructor(name) { this.name = name; } sayHello() { console.log(`Hello, my name is ${this.name}`); } } const person = new Person('John Doe'); person.sayHello(); ``` This code uses modern JavaScript syntax (classes and template literals). If Babel is working correctly, it should transpile this code to older syntax when we build our project. **Step 5: Build and run your project** Finally, let's build and run our project. Run the following command in your terminal: ``` npx webpack ``` This will build our project and bundle our code into a single file called `bundle.js`. Open your `bundle.js` file and verify that the code has been transpiled correctly. **Conclusion:** In this lab topic, we learned how to integrate Babel into a Webpack project to transpile modern JavaScript. We installed the necessary packages, configured Babel, configured Webpack to use Babel, and verified that Babel was working correctly. **Additional Resources:** * [Babel documentation](https://babeljs.io/docs/en/) * [Webpack documentation](https://webpack.js.org/) **What's Next?** Now that we've learned how to transpile modern JavaScript with Babel, we'll move on to the next topic: **Understanding CI/CD Concepts**. This topic will cover the basics of Continuous Integration and Continuous Deployment (CI/CD) and how to implement CI/CD pipelines in modern development workflows. **Do you have any questions or need help?** If you have any questions or need help with integrating Babel into your Webpack project, please leave a comment below.