使用不同语言进行配置(configuration languages)

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

TypeScript

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

npm install --save-dev typescript ts-node @types/node @types/webpack

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

webpack.config.ts

import path from 'path';
import webpack from 'webpack'; const config: webpack.Configuration = {
mode: 'production',
entry: './foo.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'foo.bundle.js'
}
}; export default config;

以上示例假定 webpack 版本 >= 2.7,或者,在 tsconfig.json 文件中,具有 esModuleInterop 和allowSyntheticDefaultImports 这两个新的编译器选项的较新版本 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 包:

npm install --save-dev tsconfig-paths

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

tsconfig-for-webpack-config.json

{
"compilerOptions": {
"module": "commonjs",
"target": "es5"
}
}
ts-node 可以使用 tsconfig-path 提供的环境变量来解析 tsconfig.json 文件。

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

package.json

{
"scripts": {
"build": "TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack"
}
}

CoffeeScript

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

npm install --save-dev coffee-script
之后就可以使用 Coffeecript 书写配置文件了:

webpack.config.coffee
HtmlWebpackPlugin = require('html-webpack-plugin')
webpack = require('webpack')
path = require('path') config =
mode: 'production'
entry: './path/to/my/entry/file.js'
output:
path: path.resolve(__dirname, 'dist')
filename: 'my-first-webpack.bundle.js'
module: rules: [ {
test: /\.(js|jsx)$/
use: 'babel-loader'
} ]
plugins: [
new (webpack.optimize.UglifyJsPlugin)
new HtmlWebpackPlugin(template: './src/index.html')
] module.exports = config

Babel and JSX

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

感谢 Jason Miller

首先安装依赖:

npm install --save-dev babel-register jsxobj babel-preset-es2015

.babelrc  

{
"presets": [ "es2015" ]
}

webpack.config.babel.js

import jsxobj from 'jsxobj';

// example of an imported plugin
const CustomPlugin = config => ({
...config,
name: 'custom-plugin'
}); export default (
<webpack target="web" watch mode="production">
<entry path="src/index.js" />
<resolve>
<alias {...{
react: 'preact-compat',
'react-dom': 'preact-compat'
}} />
</resolve>
<plugins>
<uglify-js opts={{
compression: true,
mangle: false
}} />
<CustomPlugin foo="bar" />
</plugins>
</webpack>
);

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

  

  

  

  

  

  

  

  

webpack新版本4.12应用九(配置文件之使用不同语言进行配置)的更多相关文章

  1. webpack新版本4.12应用九(配置文件之多种配置类型)

    除了导出单个配置对象,还有一些方式满足其他需求. 导出为一个函数 最终,你会发现需要在开发和生产构建之间,消除 webpack.config.js 的差异.(至少)有两种选项: 作为导出一个配置对象的 ...

  2. webpack新版本4.12应用九(配置文件之模块(module))

    这些选项决定了如何处理项目中的不同类型的模块. module.noParse RegExp | [RegExp] RegExp | [RegExp] | function(从 webpack 3.0. ...

  3. webpack新版本4.12应用九(配置文件之输出(output))

    output 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出.以及在哪里输出你的「bundle.asset 和其他你所打包或使用 webpack 载入的任何内容」. ou ...

  4. webpack新版本4.12应用九(配置文件之入口和上下文(entry and context))

    entry 对象是用于 webpack 查找启动并构建 bundle.其上下文是入口文件所处的目录的绝对路径的字符串. context string 基础目录,绝对路径,用于从配置中解析入口起点(en ...

  5. webpack新版本4.12应用九(配置文件之configuration)

    配置 查看原文|编辑此页 webpack 是需要传入一个配置对象(configuration object).取决于你如何使用 webpack,可以通过两种方式之一:终端或 Node.js.下面指定了 ...

  6. 深入理解webpack(三) babel之配置文件

    一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写 ...

  7. 关于centos7和centos6中平滑升级nginx到新版本v1.12.1修复nginx最新漏洞CVE-2017-7529的解决方案

    关于centos7和centos6中平滑升级nginx到新版本v1.12.1修复CVE-2017-7529漏洞的解决方案 漏洞描述 2017年7月11日,Nginx官方发布最新的安全公告,在Nginx ...

  8. webpack项目调试以及独立打包配置文件

    webpack项目调试 -sourcemap webpack配置提供了devtool这个选项,如果设置为 ‘#source-map’,则可以生成.map文件,在chrome浏览器中调试的时候可以显示源 ...

  9. 7 -- Spring的基本用法 -- 12... Spring 3.0 提供的表达式语言(SpEL)

    7.12 Spring 3.0 提供的表达式语言(SpEL) Spring表达式语言(简称SpEL)是一种与JSP 2 的EL功能类似的表达式语言,它可以在运行时查询和操作对象图.支持方法调用和基本字 ...

随机推荐

  1. 仿京东Tab商品切换

    在线演示 本地下载

  2. 黑苹果Yosemite 10.10.1 修改wowpc.iso文件免选择直接启动Mac系统

    安装教程见: http://www.cnblogs.com/zouzf/p/4356641.html 网上很多教程都是OK的,但每个人的具体情况不同就可能有一些细节问题搞死你1.本文所指的 wowpc ...

  3. MD5key.java

    代码如下: package com.lekou.utils; public class MD5key { ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; , , , , , , , , ...

  4. 安装配置zabbix代理之zabbix_proxy

    配置Proxy代理 如图所示: zabbix_server端在阿里云上,其代理程序部署在各地机房,代理程序收集所在机房的所有机器监控指标,然后传给server端 环境说明: CentOS releas ...

  5. C++ string 用法总结

    string查找替换.分割字符串.比较.截取.类型转换.排序等功能都提供了强大的处理函数,可以代替字符数组来使用. 熟练掌握好string的各种使用方法,能极大的提高编程效率哦 ^_^. #inclu ...

  6. try catch finally中return的执行顺序

    下面说一下try{ } catch{}中有return的情况 究竟是哪个return起作用的 话不多说 上代码 1 try中有return的情况 //普通方法 public static int hh ...

  7. 关于file_get_contents返回False的问题

    在本地测试中,使用file_get_contents获取远程服务器的资源是可以的: public function send_post($url, $post_data = null) { $post ...

  8. 分布式技术 webapi 路由追加html、aspx、shtml 适用于 对接 安卓、IOS

    首先是这样,在对接安卓和IOS或者是第三方调用的接口,我需要在服务端返回一个带.html/.aspx这样后缀的接口. 例子如下图:http://localhost:64131/api/UsersInf ...

  9. golang learning

    开发用py和go 入职前学了几天py入职后看的代码也是py 现在终于还是要学go了 初体验:感觉和c py都很像 入门语法看起来很简单的样子 学了py之后现在各种随意 需要多注意 在函数传参的时候 c ...

  10. Android -- UI布局管理,相对布局,线性布局,表格布局,绝对布局,帧布局

    1. 相对布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln ...