書名： JavaScript by Example
作者名： Dani Akash S
本章字數： 921字
更新時間： 2021-07-02 18:39:10

Bundling modules in Webpack

To start using Webpack, let's first write some JavaScript code. Open up your memes.js file and general.js file. Write the following code in both files, which simply prints the respective filenames in the console:

// inside memes.js file
console.log('Memes JS file');
// inside general.js file
console.log('General JS File');

Usually, while building multiple page web applications that have a large number of HTML files, it's common to have a single JavaScript file that has code that requires being run on all the HTML files. We are going to use the general.js file for this purpose. Even though our Meme Creator has a single HTML file, we'll use the general.js file to include some common code and include the code for Meme Creator in the memes.js file.

Why don't we try importing the general.js file inside our memes.js file? Since general.js is not exporting any modules, simply type in the following code in your memes.js file:

import './general';

Include a script tag with reference to memes.js file at the end of the <body> element in your index.html file and see the result in Chrome. If all goes well, you should see an error in Chrome's console saying: Unexpected token import. This means that something didn't go well for Chrome. Yup! Chrome doesn't know how to use the import keyword. To use import, we need Webpack to bundle both the general.js and meme.js file together and serve it as a single file to Chrome.

Let's install Webpack as a dev dependency for our project. Run the following command in the terminal:

npm install -D webpack

Webpack is now installed as a dev dependency to our project. Webpack is also a command-line tool similar to Babel. To run Webpack, we need to use npm scripts. In your package.json file, below the test script, create the following script:

"webpack": "webpack src/js/memes.js --output-filename dist/memes.js",

Now run the following command in your terminal:

npm run webpack

A new memes.js file will be created under the dist/js/ directory. This file contains both the general.js and memes.js files bundled together. Open up the new JavaScript code in VSCode; you should see a large amount of code. No need to panic at this stage; that is the code used by Webpack to manage the scopes and properties of the bundled files. It's something we don't have to worry about at this point. If you scroll to the end of the file, you will see the console.log statements that we had written in both of our original files. Edit your script tag in index.html to include the new file, as follows:

<script src="./dist/memes.js"></script>

Now, reload the page in Chrome and you should see that the console statements from both the files are executed inside the memes.js file. We have successfully imported a JavaScript file inside our code. In our previous project, we set up the development environment so that the code will be compiled and served automatically whenever a change is made in the source file. To do ES6 to ES5 compilation and other tasks, we need to install a lot of packages and must give a lot of instructions to Webpack. For this purpose, create webpack.config.js in your project root folder and write the following code:

const webpack = require('webpack');

module.exports = {
  context: __dirname,
  entry: {
    general: './src/js/general.js',
    memes: './src/js/memes.js',
  },
  output: {
    path: __dirname + "/dist",
    filename: '[name].js',
  },
}

Remove all the options passed to Webpack in package.json. Now, your script inside package.json should look as follows:

"webpack": "webpack"

Since we haven't passed any arguments to Webpack, it will look for the webpack.config.js file inside the directory from which it was executed. It will now read the configuration from the file we just created. The first line in our config file is to import Webpack using require('webpack'). We are still using Node.js to execute our code, so we should use require in our Webpack config file. We just need to export our configuration in this file as a JSON object. In the module.exports object, Here's what each property is used for:

context: Is used to specify the absolute path from which the path of files in the entry section needs to be resolved. Here, __dirname is a constant that will automatically include the absolute path of the current directory.
entry: Is used to specify all the files that need to be bundled using Webpack. It accepts string, array, and a JSON object. If you need Webpack to bundle a single entry file, just specify the file's path as a string. Otherwise, use array or object.
- In our case, we specify input files as objects in the form of [name]: [path_of_the_file].
- This [name] will be used in naming the output bundle of each file.
output: In the output, we need to specify the absolute path of the output directory, dist in our case, and the filename, which is [name], we specified in the entry section, followed by the file-extension [name].js.

Run npm run webpack in the terminal. You should see two new files created in the dist directory: general.js and memes.js, which contain the bundled code from each of their respective source files. The memes.js file will include the code from the general.js file, so it's enough to include only the memes.js file in your HTML.

Now that we have written the configuration for bundling our code, we'll use this configuration file to transform the ES6 syntax to ES5. In Webpack, transformations are applied when the file is imported. To apply transformations, we need to use loaders.

官术网_书友最值得收藏!

JavaScript by Example

Bundling modules in Webpack