zoukankan      html  css  js  c++  java
  • webpack入门教程之Hello webpack(一)

      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="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。 

    欢迎交流,QQ: 997494167
  • 相关阅读:
    python描述符(descriptor)、属性(property)、函数(类)装饰器(decorator )原理实例详解
    JVM内存模型、指令重排、内存屏障概念解析
    图解JVM的Class文件格式(详细版)
    图解JVM执行引擎之方法调用
    为何JAVA虚函数(虚方法)会造成父类可以"访问"子类的假象?
    小乖上学第一天
    FLEX RIA快速添加图标
    1,2,3,5,7,8,10,11,12,13,14,15,16,21,22 》1~3,5,7~8,10~16,21~22
    ABAP 函数编写
    ABAP子进程(字符串分割定位)
  • 原文地址:https://www.cnblogs.com/olivers/p/6073118.html
Copyright © 2011-2022 走看看