Webpack 中文文档(v4.15.1) 目录

webpack 使用不同语言进行配置(Configuration Languages)

webpack 接受以多种编程和数据语言编写的配置文件。支持的文件扩展名列表,可以在 node-interpret 包中找到。使用 node-interpret,webpack 可以处理许多不同类型的配置文件。

TypeScript

为了用 TypeScript 书写 webpack 的配置文件,必须先安装相关依赖:

--- ------- ---------- ---------- ------- ----------- --------------

之后就可以使用 TypeScript 书写 webpack 的配置文件了:

webpack.config.ts

------ ---- ---- ------
------ ------- ---- ---------

----- ------- --------------------- - -
  ----- -------------
  ------ -----------
  ------- -
    ----- ----------------------- --------
    --------- ---------------
  -
-

------ ------- ------

以上示例假定 webpack 版本 >= 2.7,或者,在 tsconfig.json 文件中,具有 esModuleInteropallowSyntheticDefaultImports 这两个新的编译器选项的较新版本 TypeScript。

注意,你还需要核对 tsconfig.json 文件。如果 tsconfig.json 中的 compilerOptions 中的 module 字段是 commonjs ,则配置是正确的,否则 webpack 将因为错误而构建失败。发生这种情况,是因为 ts-node 不支持 commonjs 以外的任何模块语法。

这个问题有两种解决方案:

  • 修改 tsconfig.json
  • 安装 tsconfig-paths

_第一个选项是指,打开你的 tsconfig.json 文件并查找 compilerOptions。将 target 设置为 "ES5",以及将 module 设置为 "CommonJS"(或者完全移除 module 选项)。

_第二个选项是指,安装 tsconfig-paths 包:

--- ------- ---------- --------------

然后,为你的 webpack 配置,专门创建一个单独的 TypeScript 配置:

tsconfig-for-webpack-config.json

-
  ------------------ -
    --------- -----------
    --------- -----
  -
-

T> ts-node 可以使用 tsconfig-path 提供的环境变量来解析 tsconfig.json 文件。

然后,设置 tsconfig-path 提供的环境变量 process.env.TS_NODE_PROJECT,如下所示:

package.json

-
  ---------- -
    -------- ----------------------------------------------------- --------
  -
-

CoffeeScript

类似的,为了使用 CoffeeScript 来书写配置文件, 同样需要安装相关的依赖:

--- ------- ---------- -------------

之后就可以使用 Coffeecript 书写配置文件了:

webpack.config.coffee

----------------- - ------------------------------
------- - ------------------
---- - ---------------

------ -
  ----- ------------
  ------ ----------------------------
  -------
    ----- ----------------------- -------
    --------- ----------------------------
  ------- ------ - -
    ----- -------------
    ---- --------------
  - -
  -------- -
    --- ---------------------------------
    --- --------------------------- -------------------
  -

-------------- - ------

Babel and JSX

在以下的例子中,使用了 JSX(React 形式的 javascript)以及 Babel 来创建 JSON 形式的 webpack 配置文件:

感谢 Jason Miller

首先安装依赖:

--- ------- ---------- -------------- ------ -------------------

.babelrc

-
  ---------- - -------- -
-

webpack.config.babel.js

------ ------ ---- --------

-- ------- -- -- -------- ------
----- ------------ - ------ -- --
  ----------
  ----- ---------------
--

------ ------- -
  -------- ------------ -------- ------------------
    ------ ---------------------
    ---------
      ------ -------- --------- ------------------- --------------- ------------------ -------
    ----------
    ---------
      ---------- --------- --------------- -------- ---------- -------- -------
      ------------- -----------
    ----------
  ----------
-

W> 如果你在其他地方也使用了 Babel 并且把模块(modules)设置为了 false,那么你要么同时维护两份单独的 .babelrc 文件,要么使用 conts jsxobj = requrie(&aposjsxobj&apos) 并且使用 moduel.exports 而不是新版本的 importexport 语法。这是因为尽管 Node.js 已经支持了许多 ES6 的新特性,然而还无法支持 ES6 模块语法。


上一篇:第二部分:配置
下一篇:多种配置类型