webpack新版本4.12应用九(配置文件之使用不同语言进行配置)
使用不同语言进行配置(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应用九(配置文件之使用不同语言进行配置)的更多相关文章
- webpack新版本4.12应用九(配置文件之多种配置类型)
除了导出单个配置对象,还有一些方式满足其他需求. 导出为一个函数 最终,你会发现需要在开发和生产构建之间,消除 webpack.config.js 的差异.(至少)有两种选项: 作为导出一个配置对象的 ...
- webpack新版本4.12应用九(配置文件之模块(module))
这些选项决定了如何处理项目中的不同类型的模块. module.noParse RegExp | [RegExp] RegExp | [RegExp] | function(从 webpack 3.0. ...
- webpack新版本4.12应用九(配置文件之输出(output))
output 位于对象最顶级键(key),包括了一组选项,指示 webpack 如何去输出.以及在哪里输出你的「bundle.asset 和其他你所打包或使用 webpack 载入的任何内容」. ou ...
- webpack新版本4.12应用九(配置文件之入口和上下文(entry and context))
entry 对象是用于 webpack 查找启动并构建 bundle.其上下文是入口文件所处的目录的绝对路径的字符串. context string 基础目录,绝对路径,用于从配置中解析入口起点(en ...
- webpack新版本4.12应用九(配置文件之configuration)
配置 查看原文|编辑此页 webpack 是需要传入一个配置对象(configuration object).取决于你如何使用 webpack,可以通过两种方式之一:终端或 Node.js.下面指定了 ...
- 深入理解webpack(三) babel之配置文件
一:理解 babel之配置文件.babelrc 基本配置项 1. 什么是babel? 它是干什么用的? ES6是2015年发布的下一代javascript语言标准,它引入了新的语法和API,使我们编写 ...
- 关于centos7和centos6中平滑升级nginx到新版本v1.12.1修复nginx最新漏洞CVE-2017-7529的解决方案
关于centos7和centos6中平滑升级nginx到新版本v1.12.1修复CVE-2017-7529漏洞的解决方案 漏洞描述 2017年7月11日,Nginx官方发布最新的安全公告,在Nginx ...
- webpack项目调试以及独立打包配置文件
webpack项目调试 -sourcemap webpack配置提供了devtool这个选项,如果设置为 ‘#source-map’,则可以生成.map文件,在chrome浏览器中调试的时候可以显示源 ...
- 7 -- Spring的基本用法 -- 12... Spring 3.0 提供的表达式语言(SpEL)
7.12 Spring 3.0 提供的表达式语言(SpEL) Spring表达式语言(简称SpEL)是一种与JSP 2 的EL功能类似的表达式语言,它可以在运行时查询和操作对象图.支持方法调用和基本字 ...
随机推荐
- ASP.NET MVC CheckBoxFor的int to bool
当我们使用CheckBoxFor类型需要使用bool ,可以将 int转换成bool <div class="form-group"> <label class= ...
- 20145120黄玄曦《网络对抗》Web基础
20145120黄玄曦<网络对抗>Web基础 回答问题 (1)什么是表单 表单在网页中主要负责数据采集功能.一个表单有三个基本组成部分: 表单标签:这里面包含了处理表单数据所用CGI程序的 ...
- 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 ...
- jvm-java内存模型与锁优化
java内存模型与锁优化 参考: https://blog.csdn.net/xiaoxiaoyusheng2012/article/details/53143355 https://blog.csd ...
- Caffe实现多标签输入,添加数据层(data layer)
因为之前遇到了sequence learning问题(CRNN),里面涉及到一张图对应多个标签.Caffe源码本身是不支持多类标签数据的输入的. 如果之前习惯调用脚本create_imagenet.s ...
- hdu 5776 sum 前缀和
sum Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others)Total Submi ...
- SqlServer、oracle、mysql分页的实现
我们在编写MIS系统和Web应用程序等系统时,都涉及到与数据库的交互,如果数据库中数据量很大的话,一次检索所有的记录,会占用系统很大的资源,因此我们常常采用,需要多少数据就只从数据库中取多少条记录,即 ...
- Software Engineering at Google
Google的Fergus Henderson在Software Engineering at Google中介绍了Google的软件工程实践. 软件开发 源码仓库 单一源代码仓库,除了核心配置和安全 ...
- sha1加密
SHA-1是一种数据加密算法,该算法的思维是接纳一段明文,然后以一种不可逆的方式将它转换成一段(一般更小)密文, 也能够简略的理解为取一串输入码(称为预映射或信息),并把它们转化为长度较短.位数固定的 ...
- 29-THREE.JS 根据公式画形状
<!DOCTYPE html> <html> <head> <title></title> <script src="htt ...