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功能类似的表达式语言,它可以在运行时查询和操作对象图.支持方法调用和基本字 ...
随机推荐
- hbase 异常
1.org.apache.hadoop.hbase.ipc.CallTimeoutException a.出现情况描述:使用java API进行hbase数据的scan操作,发现有的数据可以scan到 ...
- Block作为返回值时的使用
昨天使用一个小例子简单说明了下Block作为参数时的使用. 今天再来复习一下Block作为返回值使用时的情况,先贴一小段热门第三方框架Masonry的官方sample code: [view1 mas ...
- Linux系统下使用pwgen生成密码的使用教程
pwgen生成的密码易于记忆且相当安全.从技术上来说,容易记忆的密码不会比随机生成的密码更加安全.但是,在大多数情况下,pwgen生成的密码已经足够安全,除了网银密码等需要高安全等级的情况外.使用易于 ...
- hibernate配置文件的详解
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE hibernate-configurati ...
- linux 分析进程占用CPU过高
重点是查看进程的线程中,哪个线程占用cpu过高,然后用gdb附加到进程,调试线程,看是否有死循环或者死锁等问题,步骤如下: 1 先用ps + grep找出该死的进程pid,比如 1706 2 top ...
- Java 获取路径的几种方法 - 转载
1.获取当前类所在的“项目名路径” String rootPath = System.getProperty("user.dir"); 2.获取编译文件“jar包路径”(反射) S ...
- thinkPHP中怎么使用阿里云的sdk
使用阿里云官方给的方法总会报错 Class 'Home\Controller\DefaultProfile' not found 这样是因为namespace的原因,将aliyun sdk 放在con ...
- CocoaPods学习系列2——使自己的项目支持CocoaPods管理
该篇记录使自己的项目支持CocoaPods管理. 要达到这一目的,需要如下步骤: 1.将自己的项目提交到github,添加开源协议license 2.添加podspec文件 3.验证podspec,成 ...
- Struts2小例子
第一个Struts 2.0例子 工具:MyEclipse 6.0.1 第一步:新建web project 第二步:为项目加入Struts 2.0 的jar包 官方下载地址:http://struts. ...
- 基础的JavaScript函数
基础的JavaScript函数 1.首字母大写 2.去除数组重复项 3.数组的排序 4.闭包 1. 把用户输入的不规范的英文名字,变为首字母大写,其他小写的规范名字(使用JavaScript的map函 ...