【webpack4】用不一樣語言語法編寫webpack配置文件

寫在前面

webpack配置文件默認狀況下爲webpack.config.js,即用原生js語法書寫的配置文件。

然而，在咱們的項目中，有時候是使用的是其餘語言語法進行編程，例如：es六、coffeeScript、typeScript等語言語法。

爲此，webpack爲咱們提供了能夠採用不一樣語言語法類型書寫配置文件的功能。

具體能夠支持的文件拓展能夠看這裏：https://github.com/gulpjs/int...

能夠看到，webpack爲咱們提供了豐富多樣可供選擇的文件拓展。
下面介紹一下最多見的webpack配置文件類型:

---

TypeScript

一、安裝依賴

若是想要使用TypeScript來書寫webpack配置文件，首先要先安裝依賴：

npm install --save-dev typescript ts-node @types/node @types/webpack

若是須要用到webpack-dev-server，還須要安裝：

npm install --save-dev @types/webpack-dev-server

二、編寫webpack配置文件

（1）把webpack配置文件的文件名改成：webpack.config.ts

TypeScript的文件拓展名爲.ts，因此咱們須要同時把webpack配置文件的文件名改成.ts拓展名（原來默認爲webpack.config.js）

當咱們把webpack配置文件名拓展改成.ts時，webpack也會自動讀取該拓展名下的文件。即不須要這樣設置：

>> webpack --config webpack.config.ts

webpack會自動幫咱們讀取webpack.config.ts文件，不須要咱們再去設置了

（2）編寫webpack.config.ts配置文件

利用TypeScript編寫webpack配置文件時，webpack配置文件的結構同之前同樣，只不過語言變爲Typescript而已。

//webpack.config.ts

import path from 'path'
import webpack from 'webpack'
?
const config: webpack.Configuration = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: path.resolve(__dirname, 'dist'),
  },
}
export default config

在本webpack配置文件webpack.config.ts中，咱們把require語法改成ts中的import、export靜態模塊引入導出的語法，以便咱們測試。

三、編寫TypeScript配置文件

一般來講，大多狀況下，咱們使用某種語法、插件等，它都會有本身一份默認的配置，在比較簡單的項目中，毋需咱們編寫配置文件。

可是，在利用TypeScript書寫webpack配置文件時，咱們還須要額外編寫TypeScript配置文件tsconfig.json：

{
  "compilerOptions": {
    /* ts-node只支持commonjs規範 */
    "module": "commonjs",
    "target": "es5",
    "esModuleInterop": true,
  }
}

這是由於咱們在前面安裝的依賴ts-node不支持commonjs以外的模塊語法，因此咱們必須在TypeScript的配置文件tsconfig.json配置compilerOptions中module字段爲：commonjs，

不然，webpack會報錯。

ps：在安裝依賴的時候，咱們也須要考慮依賴的侷限性。好比某些依賴依賴於其餘的依賴，在項目開發的時候，咱們須要把其涉及到的其餘依賴一同安裝。另外，依賴不是萬能的，在肯定安裝依賴的時候，須要額外去學習該依賴相關知識。

---

coffeeScript

一、安裝依賴

與上面的內容類似，首先咱們須要安裝相關依賴：

npm install --save-dev coffee-script

二、編寫webpack配置文件

（1）把webpack配置文件的文件名改成：webpack.config.coffee

CoffeeScript的文件拓展名爲.coffee，因此咱們須要同時把webpack配置文件的文件名改成.coffee拓展名（原來默認爲webpack.config.js）

當咱們把webpack配置文件名拓展改成.coffee時，webpack也會自動讀取該拓展名下的文件。即不須要這樣設置：

webpack --config webpack.config.coffee

webpack會自動幫咱們讀取webpack.config.coffee文件，不須要咱們再去設置

（2）利用coffeeScript從新編寫webpack.config.coffee文件

//webpack.config.coffee

webpack = require('webpack')
path = require('path')

config =
  mode: 'production'
  entry: './src/index.js'
  output:
    path: path.resolve(__dirname, 'dist')
    filename: 'bundle.js'

module.exports = config

用coffeeScript編寫webpack配置文件時，毋需向TypeScript同樣編寫ts配置文件，由於coffeeScript安裝的依賴沒有其餘的兼容性問題出現。

---

ES6

利用es6寫webpack配置文件的原理同上面同樣，都是把其餘類型的語言語法編譯成原生js。把es6編譯成原生js可使用babel進行編譯（也有其餘選擇）。

一、安裝依賴

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-3

其中，要使用babel編譯器，咱們須要安裝的依賴有babel-core。babel-core包中囊括了babel的核心方法。

二、編寫webpack配置文件

因爲es6語法寫的文件名拓展也是.js，那麼webpack如何識別該js文件，並把它交予babel進行編譯呢？

（1）webpack.config.[loader].js

把webpack配置文件的文件名改成webpack.config.babel.js,其中babel字段表示須要優先使用babel-loader對該webpack配置文件進行編譯。一樣地，咱們能夠把webpack.config.[loader].js中的[loader]替換成咱們須要的loader名。

這也是咱們須要安裝babel-loader的緣由。

（2）編寫webpack.config.babel.js

爲了體現es6語法，咱們把webpack配置文件改寫成：

import path from 'path'
// example of an imported plugin
const CustomPlugin = config => ({
  ...config,
  name: 'custom-plugin'
});
?
export default {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
}

其中，import、export、... 語法爲es6語法

三、編寫babel配置文件.babelrc

babel實質是一個支持衆多語法編譯轉化的編譯器，爲了保證babel的可拓展性，做者把babel設計成能夠靈活配置，支持安裝插件的模式。所以，咱們須要自行配置babel，使之支持es6編譯。

{
  "presets": [ "es2015", "stage-3"],
}

其中，咱們須要安裝babel-preset-es2015的包，使得babel支持es6編譯。

另外，使用...config語法須要安裝babel-preset-stage-3包，不然會編譯錯誤。

總之，咱們可使用各類各樣的語言語法來編寫webpack配置文件，它們的原理都是使用對應的編譯器編譯成原生的js。因此咱們在編程的時候，都須要安裝編譯器的相關依賴，而且在必要的時候，還須要對編譯器進行配置。