Webpack: как правильно настроить?

Question

[Millerish]

Помогите правильно настроить конфиг webpack'а. Нужно что бы он делал livereload, jade->html, sass->css.

Сейчас конфиг выглядит так:

const path = require('path');    
const webpack = require('webpack');    

module.exports = {
               entry: './src/index.js',
               output: {
                   filename: 'main.js',
                   path: path.resolve(__dirname, 'dist'),
                   publicPath: '/',
                   sourceMapFilename: '[name].map'
               },
               devtool: "source-map",
               devServer: {
                   hot: true, // Tell the dev-server we're using HMR
                   contentBase: path.resolve(__dirname, 'dist'),
                   publicPath: '/'
               },
               module: {
                   loaders: [
                       {
                           test: /\.css$/,
                           loader: "style-loader!css-loader"
                       }, {
                           test: /\.sass$/,
                           loaders: ['style-loader', 'css-loader', 'sass-loader']
                       }
                   ]
               }    
};

используя команды:

• webpack-dev-server --watch-poll
  
• webpack-dev-server
  
• --watch webpack-dev-server
  

работает livereload, но sass не собирает

sass собирает только при

• webpack
  

sass подключаю в index.js через require ('./style.sass');

Как правильно сделать конфиг?

Comments

[Дмитрий Христоев]

почему не галп?

[Millerish]

Дмитрий Христоев, интересен сейчас react и webpack. Обычно preproc )))

[Дмитрий Христоев]

Millerish: вы не указали react, поэтому и задан такой вопрос

Answer 1

[Александр]

Информации не слишком много, но рискну предположить, что проблема в `publicPath`

Уточните, что именно значит "sass не собирает"?
1) webpack-dev-server выдаёт какую-то ошибку в терминале и прекращает работу?
2) отрабатывает нормально, но просто молча не билдит sass?
3) подтягивает ли он старую версию ваших sass-файлов, сбилженных до этого командой webpack?

Если поведение подходит под пункты 2 или 3, то скорее всего, `webpack-dev-server` билдит ваш код, но не знает, как отправить его браузеру. Он хранит сбилженный код в оперативной памяти, поэтому старые копии остаются в файловой системе – вот почему браузер всегда подтягивает старые файлы

Обычно такие проблемы возникают, если что-то не так с выходными полями `publicPath` и `path`. Попробуйте "поиграться" с ними, добавив, например `/assets`, и проверьте в браузере, какую именно статику он пытается запросить и по какому урлу

Если не поможет, всегда можно запустить эти две команды одновременно, должно сработать:

webpack --watch
webpack-dev-server

Можно запустить каждую из этих команд в отдельной вкладке терминала, или же поставить нод-модуль concurrently, а потом просто писать так:

concurrently --raw  --kill-others "webpack --watch" "webpack-dev-server"

--kill-others нужен для того, чтобы если один из процессов упадёт, второй упал бы тоже — в данном случае это будет удобно

Comments

[Millerish]

Александр , спасибо за ваш ответ! Ошибок нет при выполнении, просто не компилирует sass. Про одновременное выполнение двух команд знаю, так работает. Но это же совсем не комильфо ))) Как выполнить одной командой? Как добавить jade?

[Александр]

Millerish: обновил свой ответ, добавил часть про concurrently. Для jade я бы использовал html-webpack-plugin вместе с pug-loader. У них в репозитории есть пример использования именно этой связки, вот тут