Webpack 入门

目标


Webpack 的目标是,当 JavaScript 越来越多,项目越来越大时,能够对项目的各种资源进行有效的管理。

作用


  1. 模块管理,把系统分成各个子模块,便于管理和加载,在 Webpack 看来,任何文件都视为一种资源;
  2. 文件编译,通过加载器把其他类型的文件转换成 JavaScriptCSS 和图片;
  3. 资源封装,把前面的各种模块经过编译打包成一个整体。

安装


全局安装

npm install webpack -g  

示例


下面通过一个最简单最基本的例子来认识 Webpack 。

创建一个新项目 webpack-hello-world,并添加两个文件 entry.jsindex.html

mkdir webpack-hello-world  
cd webpack-hello-world  
touch entry.js index.html  

entry.js 内容:

document.write("Hello World!");  

index.html 内容:

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

然后执行

webpack entry.js bundle.js  

执行结果

Hash: c5c501cf9db19d483485  
Version: webpack 1.13.1  
Time: 38ms  
    Asset     Size  Chunks             Chunk Names
bundle.js  1.42 kB       0  [emitted]  main  
   [0] ./entry.js 32 bytes {0} [built]

在浏览器中打开 index.html ,就可以在页面上看到 Hello World! 信息。

源码:webpack-series

Show Comments