webpack入门第一篇

来源：互联网发布：用友t6软件下载编辑：程序博客网时间：2024/06/08 00:53

从网上看了各种资料，总是找不到合适的资料，然后自己学习，经过了几番折腾，决定自己写一篇教程，希望看到的人，可以快速入门webpack。也希望看到的朋友能够学会webpack，个人觉得确实是个好东西。
首先进入官网 http://webpack.github.io/docs/tutorials/getting-started/，居然是英文的，当然肯定是英文的，哈哈。那么现在我们来解析一下这个英文文档。这个文档是webpack的入门教程，也算是开始的教程，跟着教程做就好。废话少说，我们开始今天的入门第一天。
我这里是win7系统，就按windows的命令来介绍了，苹果本差不多的。
1，首先需要安装node.js，这个不用介绍了吧，如果需要的话，可以下面评论，我来帮你解答。
2，安装webpack，

npm install webpack -g

3，新建文件demo1，在demo1文件里按住shift，然后右键，弹出命令行。
4，新建文件，entry.js

document.write("It works.");

5、新建文件index.html

<html>    <head>        <meta charset="utf-8">    </head>    <body>        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>    </body></html>

6，现在运行webpack的时刻来了，在命令行里输入

webpack ./entry.js bundle.js

如果成功的话，会展示如下

Version: webpack 1.14.0Time: 16ms    Asset     Size  Chunks             Chunk Namesbundle.js  1.42 kB       0  [emitted]  mainchunk    {0} bundle.js (main) 28 bytes [rendered]    [0] ./tutorials/getting-started/setup-compilation/entry.js 28 bytes {0} [built]

现在可以运行index.html查看结果了。

为了防止教程过长，这篇博客就到这结束了，如果喜欢可以继续看下一篇，我会持续更新这个博客，帮助来学习webpack。

阅读全文

0 0