**Course Title:** Build and Package Management in Modern Development **Section Title:** Building with Webpack **Topic:** Set up a Webpack configuration for a simple application. (Lab topic) **Introduction** In this lab topic, we'll walk through setting up a basic Webpack configuration for a simple JavaScript application. By the end of this topic, you'll be able to create a Webpack configuration file (webpack.config.js) and use it to build and bundle your application. **Prerequisites** * Familiarity with JavaScript and modern development concepts * Basic understanding of Webpack and its role in building and bundling applications * npm or Yarn installed on your system (we'll be using npm in this example) * A code editor or IDE of your choice **Step 1: Create a new project directory and initialize a new npm project** Create a new directory for your project and navigate to 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 new `package.json` file in your project directory. **Step 2: Install Webpack and its dependencies** Install Webpack and its dependencies by running the following command: ```bash npm install webpack webpack-cli webpack-dev-server --save-dev ``` This will install Webpack, the Webpack CLI, and the Webpack development server as development dependencies in your project. **Step 3: Create a new file for your Webpack configuration** Create a new file called `webpack.config.js` in your project directory. This file will contain your Webpack configuration. **Step 4: Set up your Webpack configuration** In your `webpack.config.js` file, add the following code: ```javascript 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/, }, ], }, }; ``` Let's break down what this configuration does: * `entry`: specifies the entry point of your application (in this case, `src/index.js`) * `output`: specifies the output file and directory for your bundled application * `module`: specifies how Webpack should handle different types of files (in this case, JavaScript files) * `rules`: specifies an array of rules for how to handle different types of files In this example, we're using the `babel-loader` to transpile our JavaScript code. **Step 5: Create a new file for your application entry point** Create a new file called `index.js` in a new directory called `src`. This file will contain the entry point of your application. **Step 6: Run Webpack** Run the following command to build and bundle your application: ```bash npx webpack ``` This will create a new file called `bundle.js` in your `dist` directory. **Conclusion** In this lab topic, we set up a basic Webpack configuration for a simple JavaScript application. We created a new project directory, initialized a new npm project, installed Webpack and its dependencies, created a new file for our Webpack configuration, set up our Webpack configuration, created a new file for our application entry point, and ran Webpack to build and bundle our application. **What's next?** In the next topic, we'll cover "What is Transpilation and Why It’s Important?" from Transpiling Modern JavaScript with Babel. **External Resources** * [Webpack Documentation](https://webpack.js.org/) * [Webpack Configuration Options](https://webpack.js.org/configuration/) * [Babel Documentation](https://babeljs.io/docs/en/) **Comments/Questions?** If you have any questions or need help with this lab topic, feel free to ask.