In the previous section, we have already installed webpack. In this section, we will learn how to use webpack for file packaging.
Use webpack to package files
To pack files, first we need to initialize a project. We have already created an xkd_webpack project, and there is a package.json file, package-lock.json file and a node_modules folder in the root directory of this project, as follows Shown:
In actual projects, in order to facilitate the management of many files, we may need to create a src folder to store development files such as entry files, and then create a dist folder to store the final packaged files, as well as other types of files. For the convenience of management, we also Will be placed in the same directory.
But because we are just an example of how to use webpack to package files, we directly create a static page index.html and a JS entry file index.js file under the project root directory. The file name is our custom. If you It is also possible to use other names.
Here is the content of the index.html file:
<html>
<head>
<meta charset="utf-8">
<title>webpack入门</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
In this HTML file, we introduced a bundle.js file. This bundle.js file is the final packaged file, but it has not been generated yet. This file will be generated after we execute the packaging command.
Then the content of the entry file index.js is as follows:
document.write('你好，侠课岛！');
Finally, execute the following command to successfully package the index.js file into the bundle.js file:
webpack index.js -o bundle.js
The effect of executing the command is as follows:
After the command is executed successfully, a bundle.js file will be generated in the project root directory. The function of this file is to use an immediate execution function, and then encapsulate the content of index.js into a function, which is passed into the internal execution as a parameter, thus completing the packaging of the file:
At this time, we open the index.html file in the browser, the page will display "Hello, Xia Class Island!", which also proves that the index.js file has been successfully packaged into the bundle.js file, because we are only in the index The bundle.js file is introduced in the .html file.
Pack multiple files
Of course, we definitely have more than one .js file in the project, so if we have other .js files in addition to the index.js file, what should we do?
Example:
For example, there is also a module.js file in the project, the content is as follows:
module.exports = '侠课岛欢迎你！'
In this way, we can modify the entry file index.js and introduce the created module.js module into the entry file:
document.write('你好，侠课岛！')
document.write(require('./module.js')) // 引入模块
Execute webpack index.js -o bundle.js again, the file will be repackaged.
When the page starts, the code in the index.js file will be executed first, and the code in other files will be executed when the require statement is executed. Refresh the browser at this time, we can see that the display content in the browser has changed, and the display content becomes "Hello, Xiaclass Island! Welcome to Xiaclass Island!".
webpack will analyze the entry file and parse the files containing the dependencies. These files are packaged into bundle.js. webpack will assign a unique id to each module and index and access the module through this id.
to sum up
In the old version of webpack, we used the webpack index.js bundle.js command to perform the packaging operation, and the new webpack4.0+ version should add an -o to the command when packaging the file, otherwise an error will be reported.
Link: https://www.9xkd.com/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。