现在用vue开发项目我基本都会用到webpack，webpack是一款很好用的模块加载兼打包工具，vue的自动化构建工具vue-cli可以直接生成基于webpack的vue项目。

什么是webpack

webpack是一个模块加载兼打包工具，他能把各种资源，包括js文件，样式文件，图片，还有vue项目开发中常用的vue文件作为模块来处理和使用。他可以解析不能直接运行的扩展语言，并将其打包为合适的格式以供使用。同时还具有一些热加载热更新等功能。

webpack的工作方式

webpack的工作方式和grunt和gulp不同，webpack通过一个给定的主文件，找到你项目中的所有依赖文件，然后使用loaders处理他们，最后打包为一个浏览器可以识别的js文件。

webpack的配置文件

webpack的使用可以通过命令行进行操作，但是大型项目通过配置文件来处理会更方便。基本上每个项目都会有一个webpack.config.js的配置文件，通过这个配置文件告诉webpack需要做什么。一个基本的webpack配置文件如下：

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 插件，通过npm安装
const webpack = require('webpack');
const path = require('path');
const config = {
  // 页面入口文件配置，即上文提到的主文件
  entry: './path/to/my/entry/file.js',
  // 打包后文件的输出地方
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  //其它解决方案配置
  resolve: {
      //查找module的话从这里开始查找
      root: 'E:/github/flux-example/src', //绝对路径
      extensions: ['', '.js', '.json', '.scss'], // 这些后缀的文件引入时可以省略后缀
      // 别名的设置，避免引入文件时写太长的地址
      alias: {
          AppStore : 'js/stores/AppStores.js',
          ActionType : 'js/actions/ActionType.js',
          AppAction : 'js/actions/AppAction.js'
      }
  }，
  module: {
    // 配置不同类型文件的加载器
    rules: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      }
    ]
  },
  // webpack额外提供的一些好用的插件配置
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
module.exports = config;

entry入口

单入口（单页面应用）

单页面应用一般是单入口文件，可以直接用字符串或者数组来书写。

const config = {
  entry: {
    main: 'file.js'
  }
};
module.exports = config;

简写为：

const config = {
  entry: 'file.js'
};
module.exports = config;

当然，也可以将两个不相干的文件打包成一个文件，此时就可以用数组的写法。

const config = {
  entry: ['file.js', 'index.js']
};
module.exports = config;

多入口（多页面应用）

虽然平时用vue开发文件一般都是开发单页面，但是webpack也可以配置多页面，这时entry的写法就应该是对象的形式。

const config = {
  entry: {
    app: './src/app.js',
    index: './src/index.js'
  }
};
module.exports = config;

此时，output的写法也需要进行相应的变动。

output输出

output需要使用绝对路径，可以利用path进行处理。

写法

知道每个输出文件的名字，因为output.path选项规定了文件的位置，所以filename仅用于命名每个文件。单文件入口的写法如下：

var path = require("path");
const config = {
  entry: 'file.js',
  output: {
    filename: 'bundle.js',  
    path: path.resolve(__dirname, './dist/js')
  }
};
module.exports = config;

多文件入口的写法如下：

var path = require("path"); //webpack升级到2.0以后，路径需要引用这个模块
const config = {
  entry: {
  	a: 'a.js',
  	b: 'b.js'
  }
  output: {
    filename: '[name]-[hash].js',  
    path: path.resolve(__dirname, './dist/js')
  }
};
module.exports = config;

‘[name]-[hash].js’这种写法以保证每个文件名都不重复。

loaders加载器

loaders是webpack中最核心的功能了，通过使用不同的loader，webpack才有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如将scss转换为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件等。

loaders配置

loaders的配置包括以下几个：

test：一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
loader：loader的名称（必须）
include/exclude：手动添加必须处理的文件/文件夹或屏蔽不需要处理的文件/文件夹（可选）；
query：为loaders提供额外的设置选项（可选）

常用的loader

平时开发项目常用的loader主要由babel、css-loader、style-loader、less-loader、sass-loader、postcss-loader等，这些loader需要先通过npm安装才能正确使用。

plugins插件

插件是webpack的支柱功能。在你使用webpack配置时，webpack自身也构建于同样的插件系统上，插件目的在于解决loader无法实现的其他功能。

HtmlWebpackPlugin

这是最常用的插件之一，他的作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html，这个插件自动完成了我们之前手动做的一些事情。

webpack还有很多其他好用的插件，有兴趣的同学可以去官网研究研究。