初解 webpack 打包机制

最新推荐文章于 2025-09-11 09:44:20 发布

转载最新推荐文章于 2025-09-11 09:44:20 发布 · 55 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ff10000/p/6806871.html

文章标签：

本文介绍了webpack的基本概念及其打包机制。通过实例演示了如何使用webpack进行单文件打包，并详细讲解了项目级打包配置方法，包括配置文件的编写及常用命令。

webpack打包机制解析

先来说一下webpack,分开来讲就是web pack 即web文件打包

webpack是被在npm包中开发使用的文件集合。它的功能就是打包文件。

如webpack一样，node.js中集成的npm包管理器中被上传了7万多的应用包了，对于我们来说，可能有些包永远也用不上。但存在即合理，如我们写的日记一样，别人一点用也没有可能，但对我们自己来讲，这是一种有意义的事情。

所以我们先全局装一下webpack包：npm install webpack -g

然后我们就可以在任何文件夹下使用 webpack 这个命令了。

首先，我们来从最简单的文件来分析webpack打包机制：在你的文件目录中创建一个index.js文件

document.body.innerHTML="<h3>文件打包成功，引入成功...</h3>"

然后，可以在文件的根目录中用终端输入命令：webpack index.js bundle.js

即可将index.js打包生成bundle.js

这是最原始的打包命令，也是最好理解的一行命令

下面是index.html的内容：引入的是bundle.js

<body>

    如果打包成功，下面将显示打包文件的内容：<br>
    
</body>
<script src="./bundle.js"></script>

接下来，进一步解读webpack

上面只是打包一个文件，这个命令要写这么多，那么我们要打包一个项目的话，可就不是一个文件的事情了，所以下面说说项目的打包方法。

不管什么项目，vue框架写的，还是angular框架写的等。跟我们的打包工作没有关系。我们只关心如何让打包功能成功即可。

在某个项目的根目录下新建一个名为webpack.config.js的文件。

这个文件要写以下几项：

module.exports={
entry:"打包将从这个路径开始进入"，

output:{ path:"打包输出路径"，filename:"要生成的文件名" }，

module:{ loaders:[ 这里是项目中有关的文件类型，如css,sass,js,jpg,vue,ts...等,它们都是项目中要被打包机解析的文件，以确保它们能被认识。] }

}

在写好这个配置文件之后，我们的命令只要用：webpack 即可。

转载于:https://www.cnblogs.com/ff10000/p/6806871.html