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

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

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

    webpack.config.ts

    2. import webpack from 'webpack';
    4. const config: webpack.Configuration = {
    5.   mode: 'production',
    6.   output: {
    7.     path: path.resolve(__dirname, 'dist'),
    8.     filename: 'foo.bundle.js'
    9.   }
    10. };
    12. export default config;

    以上示例假定 webpack 版本 >= 2.7，或者，在 tsconfig.json 文件中，具有 esModuleInterop 和 allowSyntheticDefaultImports 这两个新的编译器选项的较新版本 TypeScript。

    注意，你还需要核对 tsconfig.json 文件。如果 tsconfig.json 中的 compilerOptions 中的 module 字段是 ，则配置是正确的，否则 webpack 将因为错误而构建失败。发生这种情况，是因为 ts-node 不支持 commonjs 以外的任何模块语法。

    这个问题有两种解决方案：

    • 修改 tsconfig.json。
    • 安装 tsconfig-paths。

    __第一个选项_是指，打开你的 tsconfig.json 文件并查找 compilerOptions。将 target 设置为 "ES5"，以及将 module 设置为 "CommonJS"（或者完全移除 module 选项）。

      然后，为你的 webpack 配置，专门创建一个单独的 TypeScript 配置：

      tsconfig-for-webpack-config.json

      然后，设置 tsconfig-path 提供的环境变量 process.env.TS_NODE_PROJECT，如下所示：

      package.json

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

      类似的，为了使用 CoffeeScript 来书写配置文件, 同样需要安装相关的依赖：

      1. npm install --save-dev coffee-script

      webpack.config.coffee

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

      首先安装依赖：

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

      .babelrc

      1. {
      2.   "presets": [ "es2015" ]

      webpack.config.babel.js