使用不同语言进行配置(Configuration Languages)

webpack 接受以多种编程和数据语言编写的配置文件。支持的文件扩展名列表，可以在 node-interpret 包中找到。使用 node-interpret，webpack 可以处理许多不同类型的配置文件

TypeScript

为了用 TypeScript 书写 webpack 的配置文件，必须先安装相关依赖：

npm install --save-dev typescript ts-node @types/node @types/webpack

之后就可以使用 TypeScript 书写 webpack 的配置文件了：

// webpack.config.ts
import * as webpack from 'webpack'
import * as path from 'path'

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

export default config

---

Babel and JSX

在以下的例子中，使用了 JSX（React 形式的 javascript）以及 Babel 来创建 JSON 形式的 webpack 配置文件：

首先安装依赖：

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>
    <entry path="src/index.js" />
    <resolve>
      <alias
        {...{
          react: 'preact-compat',
          'react-dom': 'preact-compat'
        }}
      />
    </resolve>
    <plugins>
      <uglify-js
        opts={{
          compression: true,
          mangle: false
        }}
      />
      <CustomPlugin foo="bar" />
    </plugins>
  </webpack>
)

如果你在其他地方也使用了 Babel 并且把模块(modules)设置为了 false，那么你要么同时维护两份单独的 .babelrc 文件，要么使用 conts jsxobj = requrie('jsxobj'); 并且使用 moduel.exports 而不是新版本的 import 和 export 语法。这是因为尽管 Node.js 已经支持了许多 ES6 的新特性，然而还无法支持 ES6 模块语法。