Webpack

webpack.prod.config.js

// rm -rf ./build && webpack --config webpack.prod.config.js -p --progress

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var ROOT = __dirname;
var PROJECT_ROOT = path.join(ROOT, 'src');
var BUILD_ROOT = path.join(ROOT, 'build');

module.exports = {
  resolve: {
    root: PROJECT_ROOT,
    extensions: [
      '',
      '.js'
    ]
  },
  entry: {
    app: [
      path.join(PROJECT_ROOT, 'index.js')
    ]
  },
  output: {
    path: BUILD_ROOT,
    filename: '[hash].bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader?optional[]=runtime&stage=0'
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract(
          'style-loader',
          'css-loader?modules!postcss-loader'
        )
      },
      {
        test: /\.wav$|\.mp3$/,
        loader: 'file-loader'
      },
      {
        test: /\.woff$|\.ttf$/,
        loader: 'url-loader?limit=8192'
      },
      {
        test: /.*\.(gif|png|jpe?g|svg)$/i,
        loaders: [
          'file-loader',
          'image-webpack-loader?{ progressive: true, optimizationLevel: 7, interlaced: false, pngquant:{ quality: "65-90", speed: 4 }}'
        ]
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  },
  postcss: [
    require('autoprefixer'),
    require('precss')
  ],
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': '"production"'
      }
    }),
    new webpack.ProvidePlugin({
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    }),
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.DedupePlugin(),
    new ExtractTextPlugin('[hash].bundle.css', {
      allChunks: true
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: path.join(PROJECT_ROOT, 'index.html'),
      inject: 'body',
      minify: {
        removeComments: true,
        collapseWhitespace: true
      }
    })
  ],
  node: {
    fs: 'empty'
  }
};

wepack.dev.config.js

// webpack-dev-server --config webpack.dev.config.js -d --content-base src --colors --inline --hot --history-api-fallback

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var ROOT = __dirname;
var PROJECT_ROOT = path.join(ROOT, 'src');

module.exports = {
  resolve: {
    root: PROJECT_ROOT,
    extensions: [
      '',
      '.js'
    ],
    alias: {
      TweenLite: path.join(ROOT, '/node_modules/gsap/src/uncompressed/TweenLite.js'),
      TweenMax: path.join(ROOT, '/node_modules/gsap/src/uncompressed/TweenMax.js'),
      TimelineLite: path.join(ROOT, '/node_modules/gsap/src/uncompressed/TimelineLite.js'),
      TimelineMax: path.join(ROOT, '/node_modules/gsap/src/uncompressed/TimelineMax.js')
    }
  },
  entry: {
    app: [
      'webpack/hot/dev-server',
      path.join(PROJECT_ROOT, 'index.js')
    ],
    vendors: [
      'vue',
      'vue-router',
      'rebound',
      'gsap'
    ]
  },
  output: {
    filename: 'bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader?optional[]=runtime&stage=0'
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.css$/,
        loaders: [
          'style-loader',
          'css-loader?modules&localIdentName=[name]__[local]__[hash:base64:5]',
          'postcss-loader'
        ]
      },
      {
        test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$/,
        loader: 'file-loader?name=[path][name].[ext]'
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      }
    ]
  },
  postcss: [
    require('autoprefixer'),
    require('precss')
  ],
  plugins: [
    new webpack.ProvidePlugin({
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    }),
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js'),
    new HtmlWebpackPlugin({
      template: path.join(PROJECT_ROOT, 'index.html'),
      inject: 'body'
    })
  ],
  node: {
    fs: 'empty'
  }
};