webpack
ローダー
サーチ…
備考
Webpackローダーは、 "preLoaders"、 "loaders"、 "postLoaders"として設定できます。それらは必ずしも必要ではありませんが、リンティングやその他の命令的またはシリアル操作を使用する構成では、パイプラインのこれらの構築段階を利用できます。
ローダーとその使用方法を理解するための鍵は、Webpackがローダーシステムを介して必要なグラフ内の各モジュールを実行することです。上記の例に従えば、Webpackはアプリケーションのインポートをクロールし始めると、必要なファイルを特定し、単純な正規表現を使用して、どのローダまたは一連のローダが必要かを判断します。
上記の ".js"または ".jsx"ファイルは、preLoaderフェーズでeslint-loaderによってes-lintedされることがわかります。他のjs|xファイルタイプも、メインローダーフェーズのbabel-loaderを介して実行されます。また、同じフェーズでは、 .scssファイルがsass-loaderにロードされます。これにより、JSモジュールのSassファイルをインポートして、結果のJSバンドルまたは別のスタンドアロンの別のCSSバンドル（ プラグインを使用）に出力することができます。
注： .scssファイルのインポートは、Webpackと適切なローダーでのみ機能します。ノードはプリプロセッサやトランスヒーラーなしでこの種のインポートを理解しません。
.scss例では、 !を使用してローダーを「連鎖」する機能もあり!異なるローダー間の "パイプ"としての感嘆符。上記の例では、「sass-loader」の出力を「css-loader」にパイプし、最後に「style-loader」にパイプします。これはloaders: ['style-loader', 'css-loader', 'sass-loader']配列でも実行できますloaders: ['style-loader', 'css-loader', 'sass-loader']ます。異なるオプションは、インラインローダー定義でも使用でき、URLによく見られるクエリパラメータの構文に従います。
https://webpack.github.io/docs/loaders.html も参照してください 。
eslintの場合はpreLoader、jsxとcssのローダーチェーンの場合はbabelを使用します。
プロジェクトをライブラリとしてバンドルするための基本設定として、次の設定を使用できます。モジュール設定にプリローダとローダのリストがどのように含まれているかに注目してください。
// webpack.config.js
var path = require('path');
module.exports = {
entry: path.join(__dirname, '..', 'src/index.js'),
output: {
path: path.join(__dirname, '..', '/lib'),
filename: outputFile,
library: 'myCoolBundle.js',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
preLoaders: [
{
test: /(\.jsx|\.js)$/,
loader: "eslint-loader",
exclude: /node_modules/,
}
],
loaders: [
{
test: /(\.jsx|\.js)$/,
loader: ['babel'],
exclude: /(node_modules)/,
include: path.join(__dirname, '..'),
query: {
presets: [ 'es2015', 'react']
}
},
{
test: /\.scss$/,
loaders: ["style-loader", "css-loader!sass-loader"]
}
]
},
resolve: {
root: path.resolve(__dirname, '..', './src'),
extensions: ['', '.js', '.jsx', '.scss'],
fallback: path.join(__dirname, '../node_modules')
},
eslint: {
configFile: path.resolve(__dirname, '..', '.eslintrc'),
}
};