How to setup webpack2 + vue.js2?

Question

JavaScript

Hello frontender world)) Help the teapot set up webpack2 in conjunction with vue, vue-loader, babel, etc. Recently I set up the environment according to the guide, everything is fine, I understand how it all worked and works, but the version here is old, in particular vue 1 version, and that doesn't work for me (And the old webpack stuff like require(vue!./blahblahblah/blah.vue))! I would like to use import and some new goodies. And yes, by the way, building a project in webpack 1 is very convenient ("build": "webpack main.js build.js"), and in the new version, as I understand it, you need to write configs, but I did not find a well-implemented stack)) Help me please))

Answer 1

let webpack = require('webpack')
let path = require('path')
 
module.exports = {
  entry: './main.js',
  output: {
    path: __dirname + '/build',
    filename: 'bundle.js',
    publicPath: './build'
  },
  resolve: {
  	alias: {
  		'vue$': 'vue/dist/vue.common.js'
  	}
  },
  module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            postLoaders: {
              html: 'babel-loader'
            },
            excludedPreLoaders: /(eslint-loader)/
          }
        }
      ]
    }
}

Answer 2

I set it up in my project using vue-cli, then a couple of days ago I manually updated the configs to webpack 2.

Answer 3

https://laracasts.com/series/webpack-for-everyone
May help. After watching, even without knowing English, I managed to learn something useful for myself.

Answer 4

https://github.com/egoist/vuepack googled it, try it