Webpack Configuration Languages

Webpack 支持使用多種編程語言和數(shù)據(jù)描述格式來編寫配置文件。在 node-interpret 中你可以找到當(dāng)前所支持的文件類型列表，通過 node-interpret，webpack 能夠處理這些類型的配置文件。

TypeScript

要使用 Typescript 來編寫 webpack 配置，你需要先安裝必要的依賴，比如 Typescript 以及其相應(yīng)的類型聲明，類型聲明可以從 DefinitelyTyped 項(xiàng)目中獲取，依賴安裝如下所示：

npm install --save-dev typescript ts-node @types/node @types/webpack
# 如果使用版本低于 v4.7.0 的 webpack-dev-server，還需要安裝以下依賴
npm install --save-dev @types/webpack-dev-server

完成依賴安裝后便可以開始編寫配置文件，示例如下：

webpack.config.ts

import * as path from 'path';
import * as 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;

該示例需要 typescript 版本在 2.7 及以上，并在 ?tsconfig.json? 文件的 compilerOptions 中添加 ?esModuleInterop? 和 ?allowSyntheticDefaultImports? 兩個(gè)配置項(xiàng)。

值得注意的是你需要確保 ?tsconfig.json? 的 ?compilerOptions? 中 ?module? 選項(xiàng)的值為 ?commonjs?,否則 webpack 的運(yùn)行會(huì)失敗報(bào)錯(cuò)，因?yàn)?nbsp;?ts-node? 不支持 ?commonjs? 以外的其他模塊規(guī)范。

你可以通過三個(gè)途徑來完成 module 的設(shè)置：

• 直接修改 ?tsconfig.json? 文件

• 修改 ?tsconfig.json? 并且添加 ?ts-node? 的設(shè)置。

• 使用 ?tsconfig-paths?

第一種方法 就是打開你的 ?tsconfig.json? 文件，找到 ?compilerOptions? 的配置，然后設(shè)置 ?target? 和 ?module? 的選項(xiàng)分別為 ?"ES5"? 和 ?"CommonJs"? (在 ?target? 設(shè)置為 ?es5? 時(shí)你也可以不顯示編寫 ?module? 配置)。

第二種方法 就是添加 ts-node 設(shè)置：

你可以為 ?tsc? 保持 ?"module": "ESNext"?配置，如果你是用 webpack 或者其他構(gòu)建工具的話，為 ts-node 設(shè)置一個(gè)重載（override）。ts-node 配置項(xiàng)

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

第三種方法 需要先安裝 tsconfig-paths 這個(gè) npm 包，如下所示：

npm install --save-dev tsconfig-paths

安裝后你可以為 webpack 配置創(chuàng)建一個(gè)單獨(dú)的 TypeScript 配置文件，示例如下：

tsconfig-for-webpack-config.json

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

?process.env.TS_NODE_PROJECT? 變量的設(shè)置如下所示:

package.json

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

之所以要添加 ?cross-env?，是因?yàn)槲覀冊谥苯邮褂?nbsp;?TS_NODE_PROJECT? 時(shí)遇到過 ?"TS_NODE_PROJECT" unrecognized command? 報(bào)錯(cuò)的反饋，添加 ?cross-env? 之后該問題也似乎得到了解決，你可以查看這個(gè) issue獲取到關(guān)于該問題的更多信息。

CoffeeScript

與 ?Typescript? 類似，在使用 CoffeeScript 前需要先安裝其依賴，如下所示:

npm install --save-dev coffeescript

完成安裝之后便可以開始編寫 webpack 配置，示例如下:

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 標(biāo)記語言）和 babel 來創(chuàng)建格式為 json 的 webpack 配置文件。

首先，需要安裝一些必要依賴，如下所示:

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

.babelrc

{
  "presets": ["es2015"]
}

webpack.config.babel.js

import jsxobj from 'jsxobj';

// 插件引入示例
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? 的值設(shè)置為 ?false?，則必須維護(hù)兩份 ?.babelrc? 的文件，或者你也可以將上述示例中的 ?import jsxobj from 'jsxobj';? 替換為 ?const jsxobj = require('jsxobj');? 并將新的 ?export? 語法替換為 ?module.exports?，因?yàn)楸M管 Node 目前已經(jīng)支持了 ES6 的許多新特性，但是仍然沒有支持 ES6 的模塊語法。