Как сделать Webpack, чтоб при обновлении sass, происходило автообновление в браузере?

Question

[Cyberial Syntwaiser]

Доброго дня, вот мой конфиг, спасибо за помощь ребят!

const path = require('path');
const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: [
  './app/js/index.js'
],
  output: {
    filename: './main.js'
  },
  devtool: "source-map",
  module: {
    rules: [{
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, './app/js/index.js'),
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.scss$/,
        exclude: /node_modules/,
            use: [ "style-loader", "css-loader", "sass-loader" ]
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
    ]
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./app/index.html",
      filename: "./index.html"
    })
  ]
};

{
  "name": "best",
  "description": "Gulp + Webpack",
  "main": "index.js",
  "author": "Cyberial Syntwaiser",
  "license": "ISC",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack-dev-server --mode development --open",
    "clear": "del-cli dist",
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "browser-sync": "2.26.3",
    "del": "3.0.0",
    "del-cli": "^1.1.0",
    "gulp": "^4.0.0",
    "gulp-autoprefixer": "^6.0.0",
    "gulp-cache": "1.1.1",
    "gulp-concat": "2.6.1",
    "gulp-cssnano": "2.1.3",
    "gulp-imagemin": "^5.0.3",
    "gulp-plumber": "1.2.1",
    "gulp-rename": "1.4.0",
    "gulp-sass": "4.0.2",
    "gulp-uglifyjs": "0.6.2",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "imagemin-pngquant": "^7.0.0",
    "node-sass": "^4.11.0",
    "path": "^0.12.7",
    "prop-types": "^15.6.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "sass-loader": "^7.1.0",
    "webpack": "^4.29.0",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "^3.1.14"
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }
}

Comments

[alex]

разберитесь в package.json, удалите весь мусор ненужный. где style-loader? где css-loader? вы их исползуете в конфиге, но их нет в зависимостях. зато есть хрена туча галп пакетов. что за дибилизм? созздайте новую папку и начните заного, вы вероятно в этой каше уже сами запутались. если мозгов не хватает прочесть документацию вебпака где все расписано про WDS, то вот например человек показывает как поднять сборку. я это нагуглил буквально за 2 минуты после прочтения вашего вопроса, почему вы не можете этого сделать? если вы пишите на реакте, есть create-react-app, в котором за вас уже все подумали

Answer 1

[Martovitskiy]

npm install style-loader css-loader --save-dev

Comments

[Martovitskiy]

и зачем тебе Gulp? В Webpack достаточно модулей

[Cyberial Syntwaiser]

Martovitskiy, Я до этого пользовался Gulp, сейчас пробую перейти на Webpack4, но что-то он не понятный для меня пока что...
Я вроде поставил sass но изменения в файлах не проходят, что не так блин не пойму пока что, а с лоадерами* нужно что то дописывать в конфиг ?

[Martovitskiy]

Cyberial Syntwaiser, нет в json style-loader css-loader, а в конфиге прописаны

[Martovitskiy]

Cyberial Syntwaiser, и еще вопрос. Есть ошибки? Когда обновляете вручную, стили применяются?

[Cyberial Syntwaiser]

Martovitskiy, Соовсем не работает, не sass в css, даже при удалении css и сохранение пустого файла ничего не происходит

[Martovitskiy]

Cyberial Syntwaiser, хм... такое впечатление, что при изменении конфига, не перезапускается npm run dev

[Cyberial Syntwaiser]

Martovitskiy, Тоесть даже банальный перезапуск пк может помочь? Или переустановка всех модулей?

[Martovitskiy]

Cyberial Syntwaiser, да не пк. npm run dev - перезапустит webpack-dev-server. Посмотри на примере видео что такае вебпак и с чем его едят.

[Cyberial Syntwaiser]

Martovitskiy, Окей, посмотрю.
Хотя я делал по документации на главной странице Webpack*a, спасибо