首页 > 代码库 > webpack入门教程之Hello webpack(一)

webpack入门教程之Hello webpack(一)

2024-08-21 11:52:04   222人阅读

　　webpack入门教程系列为官网Tutorials的个人译文，旨在给予想要学习webpack的小伙伴一个另外的途径。如有不当之处，请大家指出。

　　看完入门教程系列后，你将会学习到如下内容：

　　1.如何安装webpack

　　2.如何使用webpack

　　3.如何使用loaders

　　4.如何使用开发服务器

　　话不多说，马上开启我们的webpack之旅......

一、安装webpack(依赖nodeJs环境，nodejs环境的搭建不在此赘述)

npm install webpack -g

二、 Hello Wepack

1. 创建一个空的文件夹，新建entry.js文件。

document.write("Hello webpack.");

2. 新建index.html文件。

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

3. 在当前文件夹打开命令行，执行webpack ./entry.js bundle.js。执行后，webpack会编译entry.js并生成bundle.js文件。成功的话，会打印出如下类似信息。

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

4. 使用浏览器打开index.html，将会看到"Hello webpack"。

5. 接下来，我们将部分代码移动至另一个文件。新建content.js文件。

module.exports = "Hello webpack, it works from content.js.";

6. 更新entry.js为

+ document.write(require("./content.js"));

7. 然后再次执行webpack ./entry.js bundle.js，刷新浏览器窗口将会看到显示出"Hello webpack, It works from content.js"。

(webpack会分析你的入口文件所依赖的文件，这些文件(称作modules)同样会被包含到bundle.js中。webpack会给每一个modules一个唯一的id，并且在bundle.js中可以通过id来访问modules。
只有enrty module会在启动时执行。另外可以通过require函数引用其他modules，并在需要时执行依赖关系。)

8. 上述步骤中我们学习了使用webpack来编译js文件以及如何在一个js文件中引用另一个module。

如果本文对你有帮助，还望多多支持。

支付宝二维码附上

技术分享

 

webpack入门教程之Hello webpack(一)


联系
我们