webpack新版本4.12應用九(配置文件之使用不同語言進行配置)

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

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

ts-node 可以使用  tsconfig-path 提供的環境變量來解析  tsconfig.json 文件。

然后，設置 tsconfig-path 提供的環境變量 process.env.TS_NODE_PROJECT，如下所示：

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 =
  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>
);

如果你在其他地方也使用了 Babel 並且把模塊(modules)設置為了 false，那么你要么同時維護兩份單獨的 .babelrc 文件，要么使用 conts jsxobj = requrie('jsxobj'); 並且使用 moduel.exports 而不是新版本的 import 和 export 語法。這是因為盡管 Node.js 已經支持了許多 ES6 的新特性，然而還無法支持 ES6 模塊語法。