使用不同语言进行配置(configuration languages)

为了用 TypeScript 书写 webpack 的配置文件，必须先安装相关依赖，i.e., TypeScript and the relevant type definitions from the DefinitelyTyped project:：

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
之后就可以使用 TypeScript 书写 webpack 的配置文件了：
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;
以上示例假定 webpack 版本 >= 2.7，或者，在  tsconfig.json 文件中，具有 esModuleInterop 和 allowSyntheticDefaultImports 这两个新的编译器选项的较新版本 TypeScript。
注意，你还需要核对 tsconfig.json 文件。如果 tsconfig.json 中的 compilerOptions 中的 module 字段是 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
然后，为你的 webpack 配置，专门创建一个单独的 TypeScript 配置：
tsconfig-for-webpack-config.json
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true
 ts-node 可以使用 tsconfig-path 提供的环境变量来解析 tsconfig.json 文件。 
然后，设置 tsconfig-path 提供的环境变量 process.env.TS_NODE_PROJECT，如下所示：
package.json
  "scripts": {
    "build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
 We had been getting reports that TS_NODE_PROJECT might not work with "TS_NODE_PROJECT" unrecognized command error. Therefore running it with cross-env seems to fix the issue, for more info see this issue. 

        CoffeeScript
类似的，为了使用 CoffeeScript 来书写配置文件, 同样需要安装相关的依赖：
npm install --save-dev coffee-script
之后就可以使用 Coffeecript 书写配置文件了：
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 and 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 文件，要么使用 conts jsxobj = requrie('jsxobj'); 并且使用 moduel.exports 而不是新版本的 import 和 export 语法。这是因为尽管 Node.js 已经支持了许多 ES6 的新特性，然而还无法支持 ES6 模块语法。