設定言語

Webpackは、複数のプログラミング言語およびデータ言語で記述された設定ファイルを受け入れます。サポートされているファイル拡張子のリストは、node-interpretパッケージにあります。node-interpretを使用することで、webpackはさまざまなタイプの構成ファイルを処理できます。

TypeScript

TypeScriptでwebpackの設定を記述するには、まず必要な依存関係、つまりTypeScriptと、DefinitelyTypedプロジェクトからの関連する型定義をインストールします。

npm install --save-dev typescript ts-node @types/node @types/webpack
# and, if using webpack-dev-server < v4.7.0
npm install --save-dev @types/webpack-dev-server

その後、構成を記述します。

webpack.config.ts

import path from 'path';
import webpack from 'webpack';
// in case you run into any typescript error when configuring `devServer`
import 'webpack-dev-server';

const config: webpack.Configuration = {
  mode: 'production',
  entry: './foo.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'foo.bundle.js',
  },
};

export default config;

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  }
}

上記のサンプルでは、TypeScriptのバージョン2.7以降を使用しており、tsconfig.jsonファイルで新しいesModuleInteropおよびallowSyntheticDefaultImportsコンパイラオプションが使用されていることを前提としています。

tsconfig.jsonファイルも確認する必要があることに注意してください。tsconfig.jsonのcompilerOptionsのmoduleがcommonjsの場合、設定は完了です。そうでない場合、webpackはエラーで失敗します。これは、ts-nodeがcommonjs以外のモジュール構文をサポートしていないために発生します。

この問題には3つの解決策があります。

• tsconfig.jsonを変更します。
• tsconfig.jsonを変更し、ts-nodeの設定を追加します。
• tsconfig-pathsをインストールします。

最初のオプションは、tsconfig.jsonファイルを開き、compilerOptionsを探すことです。targetを"ES5"に、moduleを"CommonJS"に設定します（またはmoduleオプションを完全に削除します）。

2番目のオプションは、ts-nodeの設定を追加することです

tscには"module": "ESNext"を保持し、webpackまたは別のビルドツールを使用する場合は、ts-nodeのオーバーライドを設定できます。ts-node config

{
  "compilerOptions": {
    "module": "ESNext",
  },
  "ts-node": {
    "compilerOptions": {
      "module": "CommonJS"
    }
  }
}

3番目のオプションは、tsconfig-pathsパッケージをインストールすることです。

npm install --save-dev tsconfig-paths

そして、webpack構成専用の別のTypeScript構成を作成します。

tsconfig-for-webpack-config.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
  }
}

次に、tsconfig-pathsによって提供される環境変数process.env.TS_NODE_PROJECTを次のように設定します。

package.json

{
  "scripts": {
    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
  }
}

CoffeeScript

同様に、CoffeeScriptを使用するには、まず必要な依存関係をインストールします。

npm install --save-dev coffeescript

その後、構成を記述します。

webpack.config.coffee

HtmlWebpackPlugin = require('html-webpack-plugin')
webpack = require('webpack')
path = require('path')

config =
  mode: 'production'
  entry: './path/to/my/entry/file.js'
  output:
    path: path.resolve(__dirname, 'dist')
    filename: 'my-first-webpack.bundle.js'
  module: rules: [ {
    test: /\.(js|jsx)$/
    use: 'babel-loader'
  } ]
  plugins: [
    new HtmlWebpackPlugin(template: './src/index.html')
  ]

module.exports = config

BabelとJSX

以下の例では、JSX（React JavaScript Markup）とBabelを使用して、webpackが理解できるJSON構成を作成しています。

Jason Millerのご厚意による

まず、必要な依存関係をインストールします。

npm install --save-dev babel-register jsxobj babel-preset-es2015

.babelrc

{
  "presets": ["es2015"]
}

webpack.config.babel.js

import jsxobj from 'jsxobj';

// example of an imported plugin
const CustomPlugin = (config) => ({
  ...config,
  name: 'custom-plugin',
});

export default (
  <webpack target="web" watch mode="production">
    <entry path="src/index.js" />
    <resolve>
      <alias
        {...{
          react: 'preact-compat',
          'react-dom': 'preact-compat',
        }}
      />
    </resolve>
    <plugins>
      <CustomPlugin foo="bar" />
    </plugins>
  </webpack>
);