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

Not that you'll also need to check your tsconfig.json file. If the module in compilerOptions in tsconfig.json is commonjs, the setting is complete, else webpack will fail with an error. This occurs because ts-node does not support any module syntax other than commonjs.

There are two solutions to this issue:

  • Modify tsconfig.json.
  • Install tsconfig-paths.

The first option is to open your tsconfig.json file and look for compilerOptions. Set target to "ES5" and module to "CommonJS" (or completely remove the module option).

The second option is to install the tsconfig-paths package:

npm install --save-dev tsconfig-paths

And create a separate TypeScript configuration specifically for your webpack configs:

tsconfig-for-webpack-config.json

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5"
  }
}
ts-node can resolve a tsconfig.json file using the environment variable provided by tsconfig-path.

Then set the environment variable process.env.TS_NODE_PROJECT provided by tsconfig-path like so:

package.json

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

CoffeeScript

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

npm install --save-dev coffee-script

之后就可以使用 Coffeecript 书写配置文件了:

webpack.config.coffee

HtmlWebpackPlugin = require('html-webpack-plugin')
webpack = require('webpack')
path = require('path')

config =
  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>
    <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 而不是新版本的 importexport 语法。这是因为尽管 Node.js 已经支持了许多 ES6 的新特性,然而还无法支持 ES6 模块语法。

原文:https://webpack.js.org/configuration/configuration-languages/


贡献人员