详解webpack与SPA实践之开发环境搭建(2)

所以，对于webpack，我们明确三点：

1. 模块：webpack中一切资源文件（JavaScript， 样式， 图片资源等）皆视为模块；
2. 加载器：webpack通过加载器（JavaScript函数）将其他资源处理（构建）成JavaScript模块；
3. 管理依赖：webpack在编译模块时，就能分析查找该模块内的依赖，可以很好的处理不同模块间的依赖；

WEBPACK对比GRUNT/GULP

grunt

打开grunt官网，你可以看到最醒目的介绍：The JavaScript Task Runner，还有一个关键字automation – 自动化，其定位是一个JavaScript的自动化构建任务处理器，帮助开发者自动化处理项目的构建流程；

gulp

gulp官网的定义是：Automate and enhance your workflow，自动强化项目构建流程，其与grunt的目标一致，都是帮助开发者自动化处理项目的构建流程，不同的是gulp实现方式是基于流的，即以流的方式处理文件，而grunt是以二进制方式处理文件，gulp使用性能是要强于grunt的；

总结

1. webpack定位是一个模块化管理工具，而grunt/gulp都是自动化任务流程构建工具；
2. grunt基于二进制处理文件，gulp基于流式处理文件，效率比grunt更高一些；
3. webpack强大特性，使得其添加诸多插件可以替代grunt/gulp，但是目前的实践项目中，通常webpack结合gulp或grunt使用（各自处理各自专长的任务）；

安装

首先安装webpack，npm或yarn都可以，无甚区别：

npm install --save-dev webpack

关于此处的--save和-dev参数做简要说明：

1. --save是声明将安装依赖添加入package.json文件;
2. 默认地，使用npm安装包模块依赖时，依赖关系存储在在"dependencies"属性对象内，表示项目依赖；
3. webpack是作为开发环境依赖的，不是作为源码直接调用，所以添加-dev参数，以声明其是开发环境依赖；

webpack配置介绍

实践项目使用webpack完成自动化构建，本地服务调试与热加载，首先在根目录下创建webpack的配置入口文件webpack.config.js，基本内容结构如下:

  var path = require('path');

  module.exports = {
    context: path.resolve(__dirname, 'src/'),
    entry: {
      app: './scripts/app.js'
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, 'dist/scripts/')
    },
    module: {
      loaders: []
    },
    resolve: {
      modules:[],
      alias: {},
      extensions: []
    },
    plugins: [],
    devServer: {}
  };

如上，webpack配置文件使用module.exports方式导出配置对象，webpack执行时会默认读取项目根目录下webpack.config.js文件，当然可以手动配置指定一个文件作为配置文件，我们不讨论，可以参考webpack文档，接下来对webpack配置内容做简要介绍，如果你对webpack使用比较熟悉，可以跳过此节。