Как настроить webpack2 + vue.js2?

Question

[Yeldos Adetbekov]

Привет, мир фронтендеров)) Помогите чайнику настроить webpack2 в связке с vue, vue-loader, babel и пр. Недавно настроил окружение по гайду, все отлично, я понимаю как все это работало и работает, но версия тут старая, в частности vue 1 версии, и это меня не устраивает (И вебпаковские штучки старые типа require(vue!./blahblahblah/blah.vue))! Хочется использовать import и некоторые новые плюшки. И да, кстати, сборка проекта в вебпак 1 очень удобная("build": "webpack main.js build.js"), а в новой версии, я так понял нужно писать конфиги, но так и не нашел грамотно реализованного стэка)) Помогите пожалуйста))

Comments

[Yeldos Adetbekov]

Несчастный vue-cli не предлагать )))

Answer 1

[Yeldos Adetbekov]

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

[Константин Китманов]

Я проапдейтил с webpack 1 по гайду за пару часов.

Comments

[Yeldos Adetbekov]

А как быть с лодером и со сборкой?

[Константин Китманов]

Я про лоадер и сборку и говорю.
В сущности, все свелось к переименованию нескольких полей в конфиге, единственный напряг --ExtractTextPlugin.

[Yeldos Adetbekov]

А куда идет output.js(Build)?

[Yeldos Adetbekov]

Вы то уже свободно плаваете в этом фронтендовском море, а я с бэкенда пришел, по лужицам бегал. Вы представляете, если Вы "Пару часов" сидели, как я это настрою? Блин все эту стэнделоны, готовые cli это очень не актуально для меня. Когда будет новый проект то на spa можно. А пока я бы хотел частично внедрять в статичный сайт. Не подскажете где искать, и как писать это конфиги, куда он генерит все это? Спасибо)

[Константин Китманов]

Yeldos Adetbekov: > я понимаю как все это работало и работает

смелое заявление, я с вебпаком с лета воюю и до сих пор нихера не понимаю:)

По всей видимости, однофайловые компоненты вы не использовали, препроцессоры и транспиляторы тоже, если вы конфиг не писали. Так в чем проблема просто поставить webpack@2, и запустить его так же? В конце концов, сходить на официальный сайт и почитать доку по миграции, как это сделали все в этом треде? Вот когда не получится, тогда и приходите с конкретной проблемой, мол, сделал вот так, хотел вот это, а получилось вот эдак. В текущей ситуации можно только посоветовать смотреть готовые бойлерплейты и разбираться, что и откуда.

Answer 3

[Александр Мелихов]

Я в своем проекте настраивал с помощью vue-cli, затем пару дней назад обновил в ручную конфиги до webpack 2.

Answer 4

[den-masonov]

https://laracasts.com/series/webpack-for-everyone

Возможно поможет. Я после просмотра даже без знания английского сумел что то полезное вынести для себя.