webpack入门

webpack作为打包工具，支持commonJS、AMD、ES6模块规范，我们可以使用它将多个HTML、CSS、JS打包等单个或者多个文件，以减少http请求。不仅如此，webpack还可以将代码分割，按需加载文件。

例子 1——单JS文件打包

创建项目目录、初始化npm、安装本地webpack

mkdir app && cd app #创建项目目录
npm init -y #初始化npm
npm install --save-dev webpack #本地安装webpack

hello.js：

function hello()
{
    alert('hello world')

}

现在，我们得到这样的一个结构和内容：

  app
  |- package.json
  |- hello.js

打包：

webpack hello.js bundle.js

生成一个bundle.js

  app
  |- package.json
  |- hello.js
 +|- buldle.js

例子2——多js文件打包

我们现在加一个world.js，结构如下：

  app
  |- package.json
  |- hello.js
  | - world.js

world.js：

function world(){
    alert('world');
}

修改hello.js，在其中引入world.js

require('./world.js');

function hello()
{
    alert('hello world')

}

打包：

$ webpack hello.js bundle.js