webpack
ローダーとプラグイン

備考

ローダーの使い方

まず、プロジェクトのローダーをnpm installします。

webpack.config.jsでエクスポートされているコンフィグレーションオブジェクトの内部に、 moduleプロパティがすべてのローダを保持します。

const source = `${__dirname}/client/src/`;

module.exports = {
  // other settings here
  
  module: {
    loaders: [
          {
            test: /\.jsx?$/,
            include: source,
            loaders: ['babel?presets[]=es2015,presets[]=react', 'eslint']
          },
          {
            test: /\.s?css$/,
            include: source,
            loaders: ['style', 'css', 'autoprefixer', 'sass']
          }
        ]
  },
};

上記の設定では、ローダーに3つの基本設定を使用しています。

• test：これは、RegExpを使用して特定の拡張機能にローダーをバインドする場所です。最初のローダーセットはすべての.jsファイルと.jsxファイルで実行されています。 2番目のセットは、すべての.cssファイルと.scssファイルで実行されています。
• include：これは、ローダーに実行させるディレクトリです。必要に応じて、 excludeプロパティを使用して、 exclude思われるディレクトリを簡単に定義することもできます。
• loaders：これは、 testおよびinclude指定されたファイルに対して実行するすべてのローダーのリストです。

ローダーは、ローダー配列ごとに右から左へ、個々の定義の下から上へと実行されることに注意してください。以下のコードは、 sass, autoprefixer, css, style順でローダーを実行します。

loaders: [
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['style', 'css', 'autoprefixer']
  },
  {
    test: /\.s?css$/,
    include: source,
    loaders: ['sass']
  }
]

これは、webpackを初めて使用する開発者にとって混乱とバグの共通の原因です。たとえば、JSXとES6の構文を使用する場合、私たちはそのコードを埋め込み、私たちのbabelローダーによって提供されたコンパイルされたコードを埋め込むのではありません 。したがって、私たちのエスリントローダーは私たちのバベルローダーの右に置かれています。

私たちのローダーをリストするときは、 -loader接尾辞はオプションです。

loaders: ['sass']

...と同等です：

loaders: ['sass-loader']

あるいは、ローダーのリストを文字列と一緒に区切ってloaderプロパティ（単数）を使用することもできます!キャラクター。

loaders: ['style', 'css']

...と同等です：

loader: "style!css"

タイプスクリプトファイルの読み込み

webcapでtypescriptを使用するには、 typescriptとts-loaderインストールされている必要があります。

npm --save-dev install typescript ts-loader

これで、typescriptファイルを使用するようにwebpackを設定できるようになりました

// webpack.config.js

module.exports = {
  ..
  resolve: {
    // .js is required for react imports.
    // .tsx is required for react tsx files.
    // .ts is optional, in case you will be importing any regular ts files.
    extensions: ['.js', '.ts', '.tsx']
  },
  module: {
    rules: [
      {
        // Set up ts-loader for .ts/.tsx files and exclude any imports from node_modules.
        test: /\.tsx?$/,
        loaders: isProduction ? ['ts-loader'] : ['react-hot-loader', 'ts-loader'],
        exclude: /node_modules/
      }
    ]
  },
  ...
};