使用最基础的webpack打包方法来打包js文件

最新推荐文章于 2025-10-31 14:34:42 发布

原创最新推荐文章于 2025-10-31 14:34:42 发布 · 2.5k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

webpack

本文介绍了如何使用webpack打包js文件。从新建项目文件夹、初始化项目、安装webpack到创建相关文件，详细阐述了以index.js为主入口，将aside.js、content.js、header.js引入并打包成main.js的过程。通过npx webpack index.js命令进行打包，生成的dist目录包含打包后的main.js文件。浏览器打开index.html，可以看到内容与js文件实例化的顺序一致。这仅仅是webpack基础用法，更复杂的需求如指定打包目录、处理其他格式文件等则需要配置文件支持。

上一篇文章讲了如何安装webpack，那么安装好了webpack就到了实践的时候了。

首先，最基础的就是懂得如何打包js文件，webpack如果不使用loader的话，其实它本身就不会解析任何其他文件，只会解析js文件。所以本文先讲解如何打包js文件，从最简单的开始。

1、新建一个文件夹存放项目

mkdir study_2

2、初始化项目

npm init

3、安装webpack

npm install webpack-cli -D

npm install webpack -D

4、如下所示创建文件

touch index.html index.js aside.js content.js header.js

5、主要目的是以index.js作为主入口，aside.js content.js header.js被引入到index.js里面。然后index.html作为一个展示内容的页面，在index.html文件里面，script标签的src写的是webpack打包后的js文件的路径，如果默认不做任何配置，webpack打包之后的文件以dist为目录放到study_2的直接子目录下，打包之后的文件被命名为main.js，存放到dist里面，以下是各个文件的内容。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Index</title>
</head>
<body>
    <div id="root"></div>
</body>
<script src="./dist/main.js"></script>
</html>

aside.js

function Aside() {
    var dom = document.getElementById('root');

    var element = document.createElement('div');

    element.innerText = 'Aside';

    dom.append(element);
}

export default Aside;

content.js

function Content() {
    var dom = document.getElementById('root');

    var element = document.createElement('div');

    element.innerText = 'Content';

    dom.append(element);
}

export default Content;

header.js

function Header() {
    var dom = document.getElementById('root');

    var element = document.createElement('div');

    element.innerText = 'Header';

    dom.append(element);
}

export default Header;

index.js

import Header from './header.js';
import Aside from './aside.js';
import Content from './content.js';

new Header();
new Aside();
new Content();

6、现在，所有文件都写好，可以开始打包。打包用的命令是npx webpack index.js。完成一次打包工作，成功打包了的话，会如下图所示。

7、查看study_2这个目录下会发现打包后多出了一个dist文件，这个就是webpack打包后自动生成的一个文件，查看dist文件，里面确实有一个main.js文件，这个是入口文件index.js打包后生成的一个解析文件。如果在浏览器中打开index.html这个页面，会看到如下所示的内容。

这就对应到了index.js中三个实例化了的构造函数。而且顺序也跟调用的函数的顺序一致。

8、这个只是最为简单的一种使用webpack打包js文件的方法，但是如果需要更强大的功能的话，这是远远无法满足的，比如指定打包目录，打包其他格式文件，多入口文件，自动刷新页面等等功能，这些其实webpack都可以做得到，要实现这些功能需要使用到配置文件。这个接下来会讲。

-end-

标签

#webpack