乐趣区

【webpack4】用不同语言语法编写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。所以我们在编程的时候,都需要安装编译器的相关依赖,并且在必要的时候,还需要对编译器进行配置。

退出移动版