deploying webpack + vuejs + django to Heroku, procfile configurations - django

Question

I'm trying to deploy my VueJS Django app to Heroku but running into issues with running webpack on Heroku. I'm able to collect the static files but it doesn't seem like webpack is running (webpack not found) so the website isn't running webpack, which means not only will VueJs files not be transpiled to ES5, but my index.html page will not even call the bundled up code that webpack outputs. Any ideas why this is happening and how to fix it?
On somewhat related notes: I'm using Gunicorn as web server and whitenoise to serve my static files.
Also, once I am able to run webpack, how do I get ride of this error in the console even though I have put es2015 preset in my .babelrc
vendor.js:1 Uncaught SyntaxError: Unexpected token import
import Vue from 'vue'
import ElementUI from 'element-ui'
Here's what I have (mostly everything is based off of VueJS Element starter kit)
Package.json:
{
"name": "element-starter",
"description": "A Vue.js project",
"author": "yi.shyang#ele.me",
"private": true,
"scripts": {
"dev": "webpack-dev-server -d --inline --hot --env.dev",
"heroku-postbuild": "rimraf static && webpack -p --config ./webpack.config.js --progress"
},
"dependencies": {
"element-ui": "^1.1.2",
"vue": "^2.1.8"
},
"engines": {
"node": ">=6"
},
"devDependencies": {
"autoprefixer": "^6.6.0",
"babel-core": "^6.21.0",
"babel-eslint": "^7.1.1",
"babel-loader": "^6.4.0",
"babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
"babel-preset-es2015": "^6.13.2",
"css-loader": "^0.27.0",
"eslint": "^3.12.2",
"eslint-config-enough": "^0.2.2",
"eslint-loader": "^1.6.3",
"file-loader": "^0.10.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.24.1",
"postcss-loader": "^1.3.3",
"rimraf": "^2.5.4",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8",
"vue-loader": "^11.1.4",
"vue-template-compiler": "^2.1.8",
"webpack": "^2.4.1",
"webpack-dev-server": "^2.4.2"
}
}
Procfile:
web: ./manage.py collectstatic --noinput; npm install; npm run heroku-postbuild; gunicorn dashboard.wsgi --log-file -
.babelrc:
{
"presets": [
["es2015", { "modules": false }]
]
}
webpack.config.js
const {
resolve
} = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const url = require('url')
// where the static files will be accessed from publicly
const publicPath = '/static/'
module.exports = (options = {}) => ({
entry: {
vendor: './src/vendor',
index: './src/main.js'
},
output: {
path: resolve(__dirname, 'static'),
filename: options.dev ? '[name].js' : '[name].js?[chunkhash]',
chunkFilename: '[id].js?[chunkhash]',
publicPath: options.dev ? '/assets/' : publicPath
},
module: {
rules: [{
test: /\.vue$/,
use: ['vue-loader']
},
{
test: /\.js$/,
use: ['babel-loader'],
include: [resolve(__dirname, 'src'), resolve(__dirname, 'static')],
exclude: /node_modules/
},
{
test: /\.html$/,
use: [{
loader: 'html-loader',
options: {
root: resolve(__dirname, 'src'),
attrs: ['img:src', 'link:href']
}
}]
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader', 'postcss-loader']
},
{
test: /favicon\.png$/,
use: [{
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}]
},
{
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
exclude: /favicon\.png$/,
use: [{
loader: 'url-loader',
options: {
limit: 10000
}
}]
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['vendor', 'manifest']
}),
new HtmlWebpackPlugin({
template: 'src/index.html',
chunksSortMode: 'dependency'
})
// options:dev ? '' : new webpack.DefinePlugin({
// 'process.env': {
// NODE_ENV: '"production"'
// }
// }),
// options:dev ? '' : new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// }
// })
],
resolve: {
alias: {
'~': resolve(__dirname, 'src')
}
},
devServer: {
host: '127.0.0.1',
port: 8010,
proxy: {
'/api/': {
target: 'http://127.0.0.1:8080',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
historyApiFallback: {
index: url.parse(options.dev ? '/assets/' : publicPath).pathname
}
},
devtool: options.dev ? '#eval-source-map' : '#source-map'
})