webpack入门

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

例子 1——单JS文件打包

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

mkdir app && cd app #创建项目目录npm init -y #初始化npmnpm 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