Как настроить webpack для минимизации и объединения scss и javascript, например CodeKit?

У меня возникли проблемы с использованием webpack вместо Codekit v1.9.3. Я начал работать, чтобы перейти от CodeKit к Grunt и Gulp, а затем узнал о webpack, который звучит очень круто. Я просто не могу заставить его работать правильно.

"Подобно Codekit" означает, что я могу:

Напишите javascript с синтаксисом coffeescript
У всех исходных файлов и библиотек script minified/ouglified и объединены в один файл
При необходимости выберите компоненты структуры bootstrap-sass (scss)
Поддерживайте небольшой файл с настройками бутстрапа через переменные sass, например $brand-primary
Используйте webpack --watch для автоматической смены сценариев и стилей при их изменении.
Завершите работу с одним файлом css и одним script файлом, который может быть включен в таблицу стилей и тег script.

Настройка проекта Codekit

Ресурсы Bower:

В настоящее время я храню эти глобально, вне проекта:

~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets

Поскольку CodeKit поддерживает компас, у меня есть это в моем файле config.rb:

add_import_path "~/bower_components/twbs-bootstrap-sass/vendor/assets/stylesheets"

Структура проекта

js/fancybox.js
js/main.js               <-- currently the compiled js 'output' file
js/main.coffee

css/styles.css           <-- currently the compiled css 'output' file

scss/styles.scss
scss/modules/_bootstrap-customizations.scss
scss/modules/_typography.scss
scss/partials/_header.scss
scss/partials/_footer.scss

Содержание styles.scss

@import "modules/bootstrap-customizations";  # local customizations
@import "bootstrap/variables";
@import "bootstrap/mixins";
...                                          # load bootstrap files as required
@import "bootstrap/wells";

Настройка системы:

: OS X 10.9
node - v0.10.32
npm - v2.1.7
zsh - zsh 5.0.7 (x86_64-apple-darwin13.4.0)

node был установлен с homebrew brew install node и, похоже, работает отлично.

Что я пробовал

Я прочитал эти страницы:

Я попытался создать файл webpack.config.js несколько раз, моя последняя попытка состояла в нескольких версиях этого:

module.exports = {
    entry: [
    "./node_modules/bootstrap-sass-webpack!./bootstrap-sass.config.js",
    "./js/main.coffee"
    ],
    output: {
        path: __dirname,
        filename: "main.js"
    },
    module: {
        loaders: [
        { test: /\.css$/, loader: "style!css" }
        ]
    }
};

Ошибка Webpack

Когда я запускаю webpack, я получаю следующее:

ERROR in ./~/bootstrap-sass-webpack/~/css-loader!/Users/cwd/~/sass-loader!./~/bootstrap-sass-webpack/bootstrap-sass-styles.loader.js!./bootstrap-sass.config.js
stdin:1: file to import not found or unreadable: "~bootstrap-sass/assets/stylesheets/bootstrap/variables

Ошибка NPM

Я получаю сообщение об ошибке при попытке npm install bootstrap-sass, и вам не удавалось найти решение. Я даже не уверен, что мне нужен этот модуль.

npm ERR! Darwin 13.4.0
npm ERR! argv "node" "/usr/local/bin/npm" "install" "bootstrap-sass"
npm ERR! node v0.10.32
npm ERR! npm  v2.1.7
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package bootstrap-sass does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants [email protected]~3.2.0

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/cwd/webpack-test/npm-debug.log

Источники путаницы

Самые запутанные части веб-пакета для меня:

Где добавить такие вещи, как require("bootstrap-sass-webpack") - это в файле webpack.config.js или в файле js/main.js?
Если модули, подобные этому, доступны для веб-пакета, как только они установлены с помощью npm install?
Я думал, что должен сделать npm install webpack -g, чтобы webpack был установлен глобально, и используйте npm install без -g для других модулей. Однако в моем проекте не создается папка node_modules. Не должно быть одного?
Как определяются/заданы пути поиска для таких вещей, как require("bootstrap-sass-webpack")?

Какие модули node следует установить, чтобы это сделать? И как должен выглядеть мой webpack.config.js?

Ответ 1

Введение

Webpack - это в основном JavaScript-пакет. Его "родным" языком является JavaScript, и для каждого другого источника требуется загрузчик, который преобразует его в JavaScript. Если вы require() html файл, например...

var template = require("./some-template.html");

... вам понадобится html-loader. Он поворачивается...

<div>
    <img src="./assets/img.png">
</div>

... в...

module.exports = "<div>\n    <img src=\"" + require("./assets/img.png") + "\">\n</div>";

Если загрузчик не возвращает JavaScript, он должен быть "подключен" к другому загрузчику.

Как загрузить SASS файлы

Настройка загрузчиков

Для использования SASS вам понадобится как минимум sass-loader и css-loader. Css-loader возвращает строку JavaScript. Если вы хотите импортировать возвращаемую строку JavaScript как StyleSheet, вам также понадобится style-loader.

Запустите npm i sass-loader css-loader style-loader --save

Теперь вам нужно применить эти загрузчики для всех файлов, которые соответствуют /\.scss$/:

// webpack.config.js
...
module: {
    loaders: [
        // the loaders will be applied from right to left
        { test: /\.scss$/, loader: "style!css!sass" }
    ]
}
...

Вы также можете передать параметры node-sass в качестве параметров запроса:

{
    test: /\.scss$/, loader: "style!css!sass?includePaths[]=" + 
        path.resolve(__dirname, "./bower_components/bootstrap-sass/assets/stylesheets/"
}

Так как бутстрап ссылается на значки с помощью инструкции url(), css-loader попытается включить эти активы в пакет и в противном случае выбросит исключение. Для этого вам также понадобится file-loader:

// webpack.config.js
...
module: {
    loaders: [
        { test: /\.scss$/, loader: "style!css!sass" },
        { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" },
    ]
}
...

Настроить запись

Чтобы включить загрузку в свой пакет, существует несколько способов. Один из них - это вариант с несколькими входами, как вы уже пробовали. Я рекомендую использовать одну запись, где вы require() ваш главный sass файл:

// main.js
require("./main.scss");

Учитывая, что ваш includePaths настроен, вы можете:

// main.scss
// Set the font path so that url() points to the actual file
$icon-font-path: "../../../fonts/bootstrap";

@import "bootstrap";

Обратите внимание, что операции импорта в scss файлах не затрагиваются webpack, потому что у libsass нет api ( для предоставления настраиваемых преобразователей.

Чтобы предотвратить дублирование кода, важно также иметь основной файл single, потому что webpack компилирует каждый sass файл по отдельности.

Когда кофе-загрузчик установлен через npm, ваш окончательный webpack.config.js должен выглядеть так:

module.exports = {
    entry: "./js/main.coffee",
    output: {
        path: __dirname,
        filename: "main.js"
    },
    module: {
        loaders: [
            { test: /\.scss$/, loader: "style!css!sass" },
            { test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$/, loader: "file" },
            { test: /\.coffee$/, loader: "coffee" }
        ]
    }
};

Webpack глобально?

Лучше всего не устанавливать webpack глобально, потому что это зависимость вашего проекта и, следовательно, его нужно контролировать с помощью npm. Вы можете использовать scripts - раздел вашего package.json:

{
    ...
    "scripts": {
        "start": "webpack --config path/to/webpack.config.js & node server.js"
    }
}

Тогда вам просто нужно запустить npm start