您的位置：首页 > Web前端 > Webpack

【webpack】——初识

2017-07-01 10:55 141 查看

webpack 是一个现代的 JavaScript
应用程序的模块打包器(module bundler)。当
webpack 处理应用程序时，它会递归地构建一个依赖关系图表(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成少量的 bundle -
通常只有一个，由浏览器加载。

在没有webpack以前，我们我们在写前端 JavaScript 的时候，通常是写在多个

.js

文件里，通过闭包避免全局变量污染，然后一股脑地用

<script>

引入。

<body>
...
<script src="a.js"></script>
<script src="b.js"></script>
<script src="c.js"></script>
</body>

[/code]

出于性能上的追求，我们会应该把

a.js

b.js

c.js

合并为同一个文件

bundle.js

来减少请求数量，变成：

<body>
...
<script src="bundle.js"></script>
</body>

[/code]

    使用 Gulp/Grunt 等自动化构建工具很容易可以实现这样的 concat，但是很快我们就会发现，单纯的 concat 并不是一个好的方案，因为代码文件之间的依赖关系不明确，这样一来，有时不得不花一些时间去组织 concat 的顺序。我们很希望像写 Node 一样模块化地去写前端 JavaScript。

    又有些时候，在两个不同的页面当中我们常常会共用一些代码，单纯的 concat 会增加很多不必要的体积。

    所以，我们理想的情况是，可以在前端优雅地写符合模块规范（AMD, UMD, CommonJS）的代码并且自动打包，最好还能自动把重用的文件分离出来。

    Webpack 就很擅长做这种事......

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航