Удалось подружить Webpack 4 + Stylus ???

Question

[vruzin]

Господа, уже несколько дней потратил на то, чтоб подружить Webpack 4 и Stylus. Может ли кто-то поделиться РАБОЧИМ шаблоном на GitHub ??? А то реально примеры, что дают в скринкастах и всякие "профи" на сайтах, не работают с текущими версиями Webpack и Stylus. Заранее БЕЗУМНО БЛАГОДАРЕН !!!

Answer 1

[grinat]

А шо пример с https://github.com/shama/stylus-loader не работает? Какая ошибка?

Вот рабочий пример:
https://github.com/vuetifyjs/vuetify/blob/bb3ef969...
https://github.com/vuetifyjs/vuetify/blob/bb3ef969...

Answer 2

[vruzin]

Да, все примеры что есть дают ошибки. Увы!!! Ошибок тьма! Вернее не так, ошибки везде! Вот единственный вариант, где ошибок нет.
webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	entry:     {
		app: './src/index.js',
	},
	output:    {
		filename:   '[name].js',
		path:       path.resolve(__dirname, './dist'),
		publicPath: '/dist'
	},
	module:    {
		rules: [
			{ test:   /\.js$/, loader: 'babel-loader', exclude: /(node_modules|bower_components)/},
			{ test: /\.styl$/,
				use: [
					{loader: MiniCssExtractPlugin.loader, options: {publicPath: '/dist'}},
					{loader: "css-loader"},
					{loader: "stylus-loader"}
				]
			}
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: "[name].css",
			chunkFilename: "[id].css"
		})
	]
};

package.json:

"devDependencies": {
    "@babel/core": "^7.4.0",
    "@babel/preset-env": "^7.4.2",
    "autoprefixer": "^9.5.0",
    "babel-loader": "^8.0.5",
    "css-loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.5.0",
    "path": "^0.12.7",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1"
  }

Потом когда доделаю свой шаблон, я выложу его на GitHub и дам ссылку.

Comments

[kostia7alania]

долго ищо пилить7

[vruzin]

В общем так. Я окончательно разобрался, сделал себе рабочий шаблон, но честно говоря, мне кажется WebPack - это жуткий геморрой на пустом месте, не говоря о том, что код раздувается. В общем, я решил отказаться от WebPack в пользу Gulp. Сделал себе шаблон, который действительно позволяет делать быстро и эффективно очень хороший код. Вот видео, если интересно: https://youtu.be/VG0p39lmJoI
Внизу в описании ссылка на шаблон

[iMegaMaximus]

> В общем, я решил отказаться от WebPack в пользу Gulp.

Сразу видно, "Профессионал"...

[vruzin]

iMegaMaximus, ))) каждый инструмент под свои задачи. Webpack хорош немного в других задачах. Мне гораздо удобнее Gulp использовать для быстрой настройки и для сборки конкретно сайтов, потому как я под него свои модули делал для ноды. Мне это работу упрощает. Webpack удобен для Vue. Немного подправить настройки vuejs-cli под себя и все. )))