web-dev-qa-db-fra.com

Comment puis-je configurer webpack pour réduire et combiner scss et javascript comme CodeKit?

J'ai du mal à utiliser webpack au lieu de Codekit v1.9.3. J'ai commencé à travailler pour passer de CodeKit à Grunt et Gulp, puis j'ai découvert webpack, ce qui semble très cool. Je n'arrive tout simplement pas à le faire fonctionner correctement.

"Comme Codekit" signifie que je peux:

  • Écrivez javascript avec la syntaxe coffeescript
  • Faites en sorte que tous les fichiers et bibliothèques de source de script soient minifiés/uglifiés et combinés en un seul fichier
  • Inclure de manière sélective les composants du cadre bootstrap-sass (Scss) selon les besoins
  • Maintenir un petit fichier avec bootstrap personnalisations via des variables sass, comme $brand-primary
  • Utilisez webpack --watch Pour compiler automatiquement les scripts et les styles lorsqu'ils sont modifiés
  • Terminez avec un fichier CSS et un fichier de script qui peuvent être inclus avec une feuille de style et une balise de script.

Configuration du projet Codekit

Ressources Bower:

Je les stocke actuellement dans le monde, en dehors du projet:

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

Parce que CodeKit prend en charge la boussole, je l'ai dans mon fichier config.rb:

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

Structure du projet

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

Contenu de styles.scss

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

Installation du système:

  • système: OS X 10.9
  • noeud - v0.10.32
  • npm - v2.1.7
  • zsh - zsh 5.0.7 (x86_64-Apple-darwin13.4.0)

le noeud a été installé avec brew install node de homebrew et semble fonctionner correctement sinon.

Ce que j'ai essayé

J'ai lu ces pages:

J'ai tenté de créer un fichier webpack.config.js Plusieurs fois, ma dernière tentative en était plusieurs versions:

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" }
        ]
    }
};

Erreur Webpack

Lorsque j'exécute webpack j'obtiens ceci:

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

Erreur NPM

J'obtiens une erreur lors de la tentative de npm install bootstrap-sass Et je n'ai pas eu de chance lors de la recherche d'une solution. Je ne suis même pas sûr d'avoir besoin de ce module.

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 bootstrap-sass@~3.2.0

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

Sources de confusion

Les parties les plus déroutantes de webpack pour moi sont:

  1. Où faut-il ajouter des éléments comme require("bootstrap-sass-webpack") - est-ce dans le fichier webpack.config.js Ou dans le fichier js/main.js?
  2. Des modules comme celui-ci devraient-ils être disponibles pour webpack dès qu'ils sont installés avec npm install?
  3. J'ai pensé que je devrais faire npm install webpack -g Pour que le webpack soit installé globalement, et utiliser npm install Sans le -g Pour les autres modules. Cependant, je ne vois aucun dossier node_modules En cours de création dans mon projet. Ne devrait-il pas y en avoir un?
  4. Comment les chemins de recherche sont-ils déterminés/spécifiés pour des choses comme require("bootstrap-sass-webpack")?

Quels modules de nœud dois-je installer pour pouvoir le faire? Et à quoi devrait ressembler mon webpack.config.js?

coffeescriptsassnpmwebpack
32
cwd

Introduction

Webpack est principalement un bundle JavaScript. Son langage "natif" est JavaScript et toutes les autres sources nécessitent un chargeur qui le transforme en JavaScript. Si vous require() un fichier html par exemple ...

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

... vous aurez besoin du html-loader . Ça tourne...

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

...dans...

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

Si un chargeur ne renvoie pas JavaScript, il doit être "canalisé" vers un autre chargeur.

Comment charger des fichiers SASS

Configurer les chargeurs

Pour utiliser SASS, vous aurez besoin d'au moins sass-loader et css-loader . Le chargeur css renvoie une chaîne JavaScript. Si vous souhaitez importer la chaîne JavaScript renvoyée sous la forme StyleSheet , vous aurez également besoin de style-loader .

Exécutez npm i sass-loader css-loader style-loader --save

Vous devez maintenant appliquer ces chargeurs sur tous les fichiers qui correspondent à /\.scss$/:

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

Vous pouvez également passer des options à node-sass comme paramètres de requête:

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

Puisque bootstrap fait référence aux icônes via l'instruction url(), le chargeur css essaiera d'inclure ces actifs dans le bundle et lèvera une exception dans le cas contraire. C'est pourquoi vous aurez également besoin de chargeur de fichiers :

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

Configurer l'entrée

Pour inclure bootstrap dans votre bundle, il y a plusieurs façons. L'une est via l'option à entrées multiples comme vous l'avez déjà essayé. Je recommande d'utiliser une seule entrée où vous require() votre fichier sass principal:

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

Étant donné que vos includePaths sont configurés, vous pouvez faire:

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

@import "bootstrap";

Veuillez noter que les instructions d'importation dans les fichiers scss ne sont pas touchées par webpack car libsass n'a pas d'api ( encore ) pour fournir des résolveurs personnalisés.

Pour éviter la duplication de code, il est également important d'avoir un seul fichier sass principal, car webpack compile chaque fichier sass individuellement.

Avec le chargeur de café installé via npm, votre webpack.config.js Final devrait ressembler à:

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 dans le monde?

Il est préférable de ne pas installer le webpack globalement, car c'est une dépendance de votre projet et doit donc être contrôlé via npm. Vous pouvez utiliser la section scripts - de votre package.json:

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

Ensuite, il vous suffit d'exécuter npm start

65
Johannes Ewald