zoukankan      html  css  js  c++  java
  • webpack 使用

    首先创建一个静态页面 index.html 和一个 JS 入口文件 entry.js:

    <!-- index.html -->
    <html>
    <head>
      <meta charset="utf-8">
    </head>
    <body>
      <script src="bundle.js"></script>
    </body>
    </html>
    
    // entry.js
    document.write('It works.')
    

    然后编译 entry.js 并打包到 bundle.js:

    $ webpack entry.js bundle.js
    

    打包过程会显示日志:

    Hash: e964f90ec65eb2c29bb9
    Version: webpack 1.12.2
    Time: 54ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.42 kB       0  [emitted]  main
       [0] ./entry.js 27 bytes {0} [built]
    

    用浏览器打开 index.html 将会看到 It works. 。

    接下来添加一个模块 module.js 并修改入口 entry.js

    // module.js
    module.exports = 'It works from module.js.'
    
    // entry.js
    document.write('It works.')
    document.write(require('./module.js')) // 添加模块
    

    重新打包 webpack entry.js bundle.js 后刷新页面看到变化 It works.It works from module.js.

    Hash: 279c7601d5d08396e751
    Version: webpack 1.12.2
    Time: 63ms
        Asset     Size  Chunks             Chunk Names
    bundle.js  1.57 kB       0  [emitted]  main
       [0] ./entry.js 66 bytes {0} [built]
       [1] ./module.js 43 bytes {0} [built]
    

    Webpack 会分析入口文件,解析包含依赖关系的各个文件。这些文件(模块)都打包到 bundle.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时,会先执行 entry.js 中的代码,其它模块会在运行 require 的时候再执行。

  • 相关阅读:
    面向使用的软件设计随笔04
    面向使用的软件设计随笔03
    面向使用的软件设计随笔02
    面向使用的软件设计随笔01
    阅读笔记16
    阅读笔记15
    阅读笔记14
    阅读笔记13
    如何在Mac OS X上安装 Ruby运行环境
    IOS开发隐藏键盘的4种方法
  • 原文地址:https://www.cnblogs.com/ExMan/p/6758481.html
Copyright © 2011-2022 走看看