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功能类似的表达式语言,它可以在运行时查询和操作对象图.支持方法调用和基本字 ...
随机推荐
- 仿京东Tab商品切换
在线演示 本地下载
- 黑苹果Yosemite 10.10.1 修改wowpc.iso文件免选择直接启动Mac系统
安装教程见: http://www.cnblogs.com/zouzf/p/4356641.html 网上很多教程都是OK的,但每个人的具体情况不同就可能有一些细节问题搞死你1.本文所指的 wowpc ...
- MD5key.java
代码如下: package com.lekou.utils; public class MD5key { ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; ; , , , , , , , , ...
- 安装配置zabbix代理之zabbix_proxy
配置Proxy代理 如图所示: zabbix_server端在阿里云上,其代理程序部署在各地机房,代理程序收集所在机房的所有机器监控指标,然后传给server端 环境说明: CentOS releas ...
- C++ string 用法总结
string查找替换.分割字符串.比较.截取.类型转换.排序等功能都提供了强大的处理函数,可以代替字符数组来使用. 熟练掌握好string的各种使用方法,能极大的提高编程效率哦 ^_^. #inclu ...
- try catch finally中return的执行顺序
下面说一下try{ } catch{}中有return的情况 究竟是哪个return起作用的 话不多说 上代码 1 try中有return的情况 //普通方法 public static int hh ...
- 关于file_get_contents返回False的问题
在本地测试中,使用file_get_contents获取远程服务器的资源是可以的: public function send_post($url, $post_data = null) { $post ...
- 分布式技术 webapi 路由追加html、aspx、shtml 适用于 对接 安卓、IOS
首先是这样,在对接安卓和IOS或者是第三方调用的接口,我需要在服务端返回一个带.html/.aspx这样后缀的接口. 例子如下图:http://localhost:64131/api/UsersInf ...
- golang learning
开发用py和go 入职前学了几天py入职后看的代码也是py 现在终于还是要学go了 初体验:感觉和c py都很像 入门语法看起来很简单的样子 学了py之后现在各种随意 需要多注意 在函数传参的时候 c ...
- Android -- UI布局管理,相对布局,线性布局,表格布局,绝对布局,帧布局
1. 相对布局 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln ...