33
4

1 に答える 1

68

序章

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" },
    ]
}
...

エントリの構成

バンドルにブートストラップを含めるには、いくつかの方法があります。1 つは、既に試したように、マルチエントリ オプションを使用する方法です。メインのsassファイルがある単一のエントリを使用することをお勧めします:require()

// 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 が (まだ)ないため、scss-files 内の import ステートメントは webpack によって変更されないことに注意してください。

コードの重複を防ぐには、メインの sass ファイルを1 つにすることも重要です。これは、webpack がすべての sass ファイルを個別にコンパイルするためです。

npm 経由でインストールされた coffee-loader を使用すると、最終的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?

プロジェクトの依存関係であり、npm で制御する必要があるため、webpack をグローバルにインストールしないことをお勧めします。次のスクリプトのセクションを使用できますpackage.json。

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

次に、実行するだけですnpm start

于 2014-11-11T23:07:50.007 に答える