pm2
pm2官网

webpack
webpack官网
webpack中文
webpack入门教程
loader配置是对每个符合条件的依赖引用使用对应的loader处理
plugin是扩展webpack功能的，在webpack允许的各个生命周期会依次调用配置的插件注册的对应生命周期处理。
举个例子来说明loader和plugin执行时的关系，例如，对源文件为es6进行loader的babel处理后，调用plugin对应生命周期中的处理将js文件进行压缩。
webpack可以将下面这些引用方式都解析成依赖(摘抄官方文档):
ES2015 import 语句
CommonJS require() 语句
AMD define 和 require 语句
css/sass/less 文件中的 @import 语句
样式url(*)或 HTML 文件()中的图片链接(image url)

在输出文件时有两个字段控制输出文件的名称和目录，filename和chunkFilename
filename应该比较好理解，就是对应于entry里面生成出来的文件名。比如：

{
  entry: {
    "index": "pages/index.jsx"
  },
  output: {
    filename: "[name].min.js",
    chunkFilename: "[name].min.js"
  }
}

生成出来的文件名为index.min.js。

chunkFilename是未被列在入口文件中，却又需要被打包出来的文件命名配置。在异步加载模块的时候，这些依赖文件是没有被列在entry中的，如使用CommonJS的方式异步加载模块：

require.ensure(["modules/tips.jsx"], function(require) {
  var a = require("modules/tips.jsx");
}, 'tips');

异步加载的模块会以单独的文件请求加载，所以这时生成的文件名是用chunkFilename配置的，生成出的文件名就是tips.min.js。

vue
vue官网
vuex vue-router vue-resource
使用webpack构建vue项目

const path = require('path')
const webpack = require('webpack')
const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: 'build.js',
    chunkFilename: "[name].js?[hash]"
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        loader: 'style-loader!css-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
        loader: 'file-loader',
        query: {
          name: 'assets/[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue',
      // 所有图片引用都以 ~assets 开头，~标识绝对路径，可以在最后构建时输出到 assets 目录
      'assets': path.resolve(__dirname, './src/assets'),
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
      hash: true,
      template: 'src/index.html',
    }),
    new CleanWebpackPlugin(['dist'], {
      root: __dirname,
      verbose: true,
      dry: false,
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
  ],
  devServer: {
    historyApiFallback: true,
    noInfo: true
    quiet: false,
    stats: { colors: true },
    port: 80,
    proxy: {
      '/pre': {
        target: "http://xxx.xx/",
        pathRewrite: {
          '^/pre': '/pre',
        },
        changeOrigin: true,
        secure: false,
        logLevel: 'debug',
      },
    },
  },
}