使用不同语言进行配置(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. ASP.NET MVC CheckBoxFor的int to bool

    当我们使用CheckBoxFor类型需要使用bool ,可以将 int转换成bool <div class="form-group"> <label class= ...

  2. 20145120黄玄曦《网络对抗》Web基础

    20145120黄玄曦<网络对抗>Web基础 回答问题 (1)什么是表单 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的 ...

  3. Unix下 五种 I/O模型

    Unix下共有五种I/O模型: 1. 阻塞式I/O  2. 非阻塞式I/O  3. I/O复用(select和poll)  4. 信号驱动式I/O(SIGIO)  5. 异步I/O(POSIX的aio ...

  4. jvm-java内存模型与锁优化

    java内存模型与锁优化 参考: https://blog.csdn.net/xiaoxiaoyusheng2012/article/details/53143355 https://blog.csd ...

  5. Caffe实现多标签输入,添加数据层(data layer)

    因为之前遇到了sequence learning问题(CRNN),里面涉及到一张图对应多个标签.Caffe源码本身是不支持多类标签数据的输入的. 如果之前习惯调用脚本create_imagenet.s ...

  6. hdu 5776 sum 前缀和

    sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total Submi ...

  7. SqlServer、oracle、mysql分页的实现

    我们在编写MIS系统和Web应用程序等系统时,都涉及到与数据库的交互,如果数据库中数据量很大的话,一次检索所有的记录,会占用系统很大的资源,因此我们常常采用,需要多少数据就只从数据库中取多少条记录,即 ...

  8. Software Engineering at Google

    Google的Fergus Henderson在Software Engineering at Google中介绍了Google的软件工程实践. 软件开发 源码仓库 单一源代码仓库,除了核心配置和安全 ...

  9. sha1加密

    SHA-1是一种数据加密算法,该算法的思维是接纳一段明文,然后以一种不可逆的方式将它转换成一段(一般更小)密文, 也能够简略的理解为取一串输入码(称为预映射或信息),并把它们转化为长度较短.位数固定的 ...

  10. 29-THREE.JS 根据公式画形状

    <!DOCTYPE html> <html> <head> <title></title> <script src="htt ...