web-dev-qa-db-ja.com

Codepackのようなscssとjavascriptを縮小および結合するためにwebpackをセットアップするにはどうすればよいですか？

Codekit v1.9.3の代わりにwebpackの使用に問題があります。 CodeKitからGruntとGulpに移行する作業を始めた後、非常にクールなwebpackについて学びました。私はそれを正しく動作させることができないようです。

「コードキットのように」とは、私ができることを意味します

  • javascript構文でcoffeescriptを記述します
  • すべてのスクリプトソースファイルとライブラリを縮小/ u化して、1つのファイルに結合します
  • 必要に応じて_bootstrap-sass_（scss）フレームワークのコンポーネントを選択的に含める
  • bootstrap _$brand-primary_のようなsass変数によるカスタマイズで小さなファイルを維持します
  • _webpack --watch_を使用して、スクリプトとスタイルが変更されたときに自動的にコンパイルします
  • スタイルシートとスクリプトタグに含めることができる1つのcssファイルと1つのスクリプトファイルで終了します。

Codekitプロジェクトのセットアップ

Bower resources：

現在、これらをプロジェクトの外部にグローバルに保存しています。

_~/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
  • ノード-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 Error

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 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
_

混乱の原因

私にとってwebpackの最も混乱する部分は次のとおりです。

  1. require("bootstrap-sass-webpack")のようなものはどこに追加すべきですか-それは_webpack.config.js_ファイルにあるのですか、それとも_js/main.js_ファイルにあるのですか？
  2. このようなモジュールは、_npm install_でインストールされるとすぐにwebpackで利用可能になりますか？
  3. Webpackがグローバルにインストールされるように_npm install webpack -g_を実行し、他のモジュールには_npm install_なしで_-g_を使用する必要があると考えました。ただし、プロジェクトに_node_modules_フォルダーが作成されていません。あるべきではないのですか？
  4. require("bootstrap-sass-webpack")などの検索パスはどのように決定/指定されますか？

これを行うには、どのノードモジュールをインストールする必要がありますか？そして、私の_webpack.config.js_はどのように見えるべきですか？

coffeescriptsassnpmwebpack
32
cwd

前書き

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/"
}
_

bootstrap=は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" },
    ]
}
...
_

エントリを構成する

bootstrap=をバンドルに含めるには、いくつかの方法があります。1つは、すでに試したように複数エントリオプションを使用する方法です。1つの entrywhere 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";
_

Libsassにはカスタムリゾルバーを提供するapi（ yet ）がないため、scss-files内のimportステートメントはwebpackの影響を受けないことに注意してください。

コードの重複を防ぐために、singleメインsassファイルを用意することも重要です。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で制御する必要があるため、webpackをグローバルにインストールするのが最善ですnot。 _package.json_の scripts -sectionを使用できます。

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

次に、_npm start_を実行するだけです。

65
Johannes Ewald