Языки конфигурации

webpack принимает файлы конфигурации, написанные на нескольких языках программирования и данных. Список поддерживаемых расширений файлов можно найти в пакете node-interpret. Используя node-interpret, webpack может обрабатывать многие различные типы файлов конфигурации.

TypeScript

Чтобы написать конфигурацию webpack на TypeScript, сначала необходимо установить необходимые зависимости, т.е. TypeScript и соответствующие определения типов из проекта DefinitelyTyped:

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

а затем приступить к написанию вашей конфигурации:

webpack.config.ts

import path from 'path';
import webpack from 'webpack';

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

export default config;

В приведенном выше примере предполагается использование версии TypeScript >= 2.7 или более поздней версии с новыми esModuleInterop и allowSyntheticDefaultImports параметрами компилятора в вашем файле tsconfig.json.

Обратите внимание, что вам также необходимо проверить ваш файл tsconfig.json. Если модуль в compilerOptions в tsconfig.json является commonjs, настройка завершена, в противном случае webpack завершится ошибкой. Это происходит потому, что ts-node не поддерживает синтаксис модулей, кроме commonjs.

Существует два решения этой проблемы:

• Изменить tsconfig.json.
• Установить tsconfig-paths.

Первое решение заключается в открытии файла tsconfig.json и поиске compilerOptions. Установите target на "ES5" и module на "CommonJS" (или полностью удалите опцию module).

Второе решение заключается в установке пакета tsconfig-paths:

npm install --save-dev tsconfig-paths

И создать отдельную конфигурацию TypeScript специально для ваших конфигураций webpack:

tsconfig-for-webpack-config.json

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

ts-node может разрешить файл tsconfig.json с помощью переменной среды, предоставленной tsconfig-paths.

Затем установите переменную среды process.env.TS_NODE_PROJECT, предоставленную tsconfig-paths следующим образом:

package.json

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

Мы получали сообщения о том, что TS_NODE_PROJECT может не работать с ошибкой "TS_NODE_PROJECT" unrecognized command. Поэтому выполнение его с cross-env, кажется, решает проблему. Более подробную информацию можно найти здесь.

CoffeeScript

Аналогично, чтобы использовать CoffeeScript, сначала нужно установить необходимые зависимости:

npm install --save-dev coffee-script

а затем приступить к написанию вашей конфигурации:

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 разметка) и Babel для создания JSON-конфигурации, которую webpack может понять.

С любезным разрешением от 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>
);

Если вы используете Babel где-то еще и у вас modules установлено на false, вам нужно будет либо поддерживать два отдельных файла .babelrc или использовать const jsxobj = require('jsxobj'); и module.exports вместо нового import и export синтаксиса. Это связано с тем, что, хотя Node поддерживает множество новых функций ES6, он пока не поддерживает синтаксис модулей ES6.