前段构建工具 Webpack

webpack是一个模块打包工具。什么意思呢？它将一对文件中的每个文件都作为一个模块，找出他们的依赖关系，将它们打包为可部署的静态资源。

下面通过例子来看看他是怎么使用的。

安装

新建 一个文件夹 test-webpack,进入文件夹

cd test-webpack
npm init -y

npm init -y 命令会初始化一个 package.json文件。package.json主要是管理我们的依赖包，有三个地方需要注意

{
//这里可以定义一些脚本
"scripts" : {

    },
//这里表示生产环境依赖的包，使用 npm install -S ... or npm install --save ... 
//安装的包都会放到这里，这两种方式是等价的。
"dependencies":{

    },
//表示之在开发环境需要的包，使用 npm install -D ... 或者 npm install --save-dev ...
//安装的包会放到这里，这两种方式是等价的
"devDependencies":{

    }
}

执行安装一下webpack

npm install webpack@3.3.0 --save-dev

下图有我安装的包

只不过我学习时把所需要的包都装上了，文章是后写的

完成后，我们可以看到，package.json 中已经有了相应的配置。因为没有在全局安装，所以，只能这样运行：

node_modules/.bin/webpack