使用不同语言进行配置(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. Google揭露SHA-1碰撞,加速数据重删字节对比

    原创 架构师技术联盟  近期,Google和道荷兰阿姆斯特研究者宣布攻破了世界上第一例公开的SHA-1哈希碰撞实例,业界一片哗然.当两组不同的数据(文件.一段数据)计算出相同的Hash值时,即视为二者 ...

  2. Linux中df命令查询磁盘信息和fdisk命令分区的用法

    df - 报告文件系统磁盘空间的使用情况  总览 df [OPTION]... [FILE]... POSIX 选项: [-kP] GNU 选项 (最短方式): [-ahHiklmPv] [-t fs ...

  3. 定制kali linux

    Kali Linux Ps: Kali发布撸~ 写了个如此装13的标题.这是一个Guide… 都是些基本操作撸.定制为王实推 ArchLinux.  各位看官继续………………………………………号外.L ...

  4. java中string与byte[]之间的转化分析

    背景:最近接触zookeeper的java开发,由于zookeeper中传的好像都是byte[]的数据(需要进一步确认),好多情况下都需要进行转换. 1)和zookeeper原生API不同,通过zkc ...

  5. 迁移cnblog博客

    title: 迁移cnblog博客 date: 2018-03-18 categories: cnblogs tags: life 写博客最怕就是这种迁来迁去的,太麻烦了 还好老早就使用markdow ...

  6. php读取csv乱码问题解决方法

    <form action="erxian_cy.php" method="post" enctype="multipart/form-data& ...

  7. jmeter-JSON Path Assertion(对响应的json数据进行断言)

    1,通过plugin manager 安装json  pllugins

  8. FM算法 的总结

    FM的总结: 1.FM算法与线性回归相比增加了特征的交叉.自动选择了所有特征的两两组合,并且给出了两两组合的权重. 2.上一条所说的,如果给两两特征的组合都给一个权重的话,需要训练的参数太多了.比如我 ...

  9. MySQL二进制日志功能介绍

    二进制日志记录所有更新数据的SQL语句,其中也包含可能更新数据的SQL语句,例如DELETE语句执行过程中无匹配的行.二进制日志中还包含了与执行SQL语句相关的内容,例如SQL语句执行的时间.错误代码 ...

  10. Visual对象——WPF

    System.Object        System.Windows.Threading.DispatcherObject                System.Windows.Depende ...