用不同语言语法编写webpack配置文件
写在前面
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。所以我们在编程的时候，都需要安装编译器的相关依赖，并且在必要的时候，还需要对编译器进行配置。
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！