寫在前面
webpack配置文件默認情況下爲webpack.config.js,即用原生js語法書寫的配置文件。
然而，在我們的項目中，有時候是使用的是其他語言語法進行編程，例如：es6、coffeeScript、typeScript等語言語法。
爲此，webpack爲我們提供了可以採用不同語言語法類型書寫配置文件的功能。
具體可以支持的文件拓展可以看這裏：https://github.com/gulpjs/int...
可以看到，webpack爲我們提供了豐富多樣可供選擇的文件拓展。
下面介紹一下最常見的webpack配置文件類型:
TypeScript
1、安裝依賴
如果想要使用TypeScript來書寫webpack配置文件，首先要先安裝依賴：
npm install --save-dev typescript ts-node @types/node @types/webpack
如果需要用到webpack-dev-server，還需要安裝：
npm install --save-dev @types/webpack-dev-server
2、編寫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靜態模塊引入導出的語法，以便我們測試。
3、編寫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
1、安裝依賴
與上面的內容相似，首先我們需要安裝相關依賴：
npm install --save-dev coffee-script
2、編寫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進行編譯（也有其他選擇）。
1、安裝依賴
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-stage-3
其中，要使用babel編譯器，我們需要安裝的依賴有babel-core。babel-core包中囊括了babel的核心方法。
2、編寫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語法
3、編寫babel配置文件.babelrc
babel實質是一個支持衆多語法編譯轉化的編譯器，爲了保證babel的可拓展性，作者把babel設計成可以靈活配置，支持安裝插件的模式。因此，我們需要自行配置babel，使之支持es6編譯。
{
"presets": [ "es2015", "stage-3"],
}其中，我們需要安裝babel-preset-es2015的包，使得babel支持es6編譯。
另外，使用...config語法需要安裝babel-preset-stage-3包，否則會編譯錯誤。
總之，我們可以使用各種各樣的語言語法來編寫webpack配置文件，它們的原理都是使用對應的編譯器編譯成原生的js。所以我們在編程的時候，都需要安裝編譯器的相關依賴，並且在必要的時候，還需要對編譯器進行配置。