使用不同语言进行配置(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 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

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

T> ts-node可以使用tsconfig-path提供的环境变量来解析tsconfig.json文件。

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

package.json

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

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 (webpack.optimize.UglifyJsPlugin)
    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>
      <uglify-js opts={{
        compression: true,
        mangle: false
      }} />
      <CustomPlugin foo="bar" />
    </plugins>
  </webpack>
);

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

-->