配置语言

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 以外的任何模块语法。

这个问题有三种解决方案

• 修改 tsconfig.json。
• 修改 tsconfig.json 并为 ts-node 添加设置。
• 安装 tsconfig-paths。

第一种选择是打开你的 tsconfig.json 文件，找到 compilerOptions。将 target 设置为 "ES5"，将 module 设置为 "CommonJS"（或完全删除 module 选项）。

第二种选择是为 ts-node 添加设置

你可以为 tsc 保留 "module": "ESNext"，如果你使用 webpack 或其他构建工具，则可以为 ts-node 设置覆盖。 ts-node 配置

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

第三种选择是安装 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>
);