組態語言

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 標記) 和 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>
);