【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。因此咱们在编程的时候，都须要安装编译器的相关依赖，而且在必要的时候，还须要对编译器进行配置。