В документации все написано. В ютубе полно роликов про webpack 4. Пример установки лоадера показан вот здесь
https://webpack.js.org/concepts/loaders/#example . Пример установки sass-loader написан прямо в
npm. Чтобы настроить перезагрузку страницы при изменениях, то нужно настроить
dev сервер в вебпаке. Готовых конфигов, если не хочется вникать, в интернете полно.
Документация отвечает на все вопросы на 100%. Вкратце, нужно указать в webpack.config.js точку входа (это главный js файл), и точку выхода (куда ложить файлы после обработки вебпаком). Импортировать модули-лоадеры, для обработки каждого нужного файла (изначально вебпак ничего не умеет), и добавить их в конфиг. Если нужно, то добавить еще модули-плагины. И настроить dev сервер. Запускать вебпак через командную строку, или прописать в package.json новый скрипт, например такой:
"scripts": {
"dev": "webpack-dev-server --mode development --open"
}
И просто писать
npm run dev для запуска.
Пример настройки лоадеров, с описанием, что делает каждый, взято с npm:
// webpack.config.js
module.exports = {
...
module: {
rules: [{
test: /\.scss$/,
use: [
"style-loader", // creates style nodes from JS strings
"css-loader", // translates CSS into CommonJS
"sass-loader" // compiles Sass to CSS
]
}]
}
};
