用不同语言语法编写webpack配置文件

更新日期: 2019-03-02阅读: 2.4k标签: 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。所以我们在编程的时候,都需要安装编译器的相关依赖,并且在必要的时候,还需要对编译器进行配置。

链接: https://www.fly63.com/article/detial/2685

浅谈Webpack打包工具的应用

webpack 在前端工程中随处可见,当前流行的 vue, react, weex 等解决方案都推崇 webpack 作为打包工具。前端工具云集的时代,这是你值得选择的之一。

一步一步webpack,webpack的学习入门

webpack是前端工程构建的一套工具,为什么一个程序称之为一套呢,是因为webpack其实是npm的一个模块,使用起来的话,这期间还需要很多其它模块来进行支持,所以我称之为一套工具。

如何写 Webpack 配置文件

本文从一个小Demo开始,通过不断增加功能来说明webpack的基本配置,只针对新手。webpack基本的配置就可以熟悉了,会引入loader,配置loader选项,会设置alias,会用plugins差不多。

WebPack中Plugins的使用和整理,以及常用的Plugins插件

Plugins是webpack的基础,我们都知道webpage的plugin是基于事件机制工作的,这样最大的好处是易于扩展。讲解如果扩展内置插件和其他插件,以及我们常用的Plugins插件

大多数项目中会用到的webpack小技巧

webpack技巧的总结:进度汇报、压缩、复数文件打包、分离app文件与第三方库文件、资源映射、输出css文件、开发模式、分析包的大小、更小的react项目、更小的Lodash、引入文件夹中所有文件、清除extract-text-webpack-plugin日志。

优化Webpack构建性能的几点建议

Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位。在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程都息息相关,如何改善 Webpack 构建打包的性能也关系到我们开发和发布部署的效率。

Webpack 4正式发布了!

新版 Webpack 中我们所做的每一个更新目的都在于此,为了当大家在使用 Webpack 的时候敏捷连续毫无顿挫感。 webpack 4 进行构建性能测试,得出的结果非常有趣。结果很惊人,构建时间降低了 60%-98%!

Webpack 4.0.0不再支持 Node.js 4

Webpack 是一个现代 JavaScript 应用程序的模块打包器 (module bundler) 。当 Webpack 处理应用程序时,它会递归地构建一个依赖关系图,其中包含应用程序需要的每个模块

我当初为什么写webpack_Tobias Koppers

Tobias Koppers是一位自由软件开发者,家住德国纽伦堡。他因写出webpack这个已有数百万开发者使用的开源软件而名噪一时。他目前专注于JavaScript和开源项目。以下是我对他个人的专访,希望对大家有所启发。

webpack项目轻松混用css module

本文讲述css-loader开启css模块功能之后,如何与引用的npm包中样式文件不产生冲突。比如antd-mobilenpm包的引入。在不做特殊处理的前提下,样式文件将会被转译成css module。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!