博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
webpack新版本4.12应用九(配置文件之使用不同语言进行配置)
阅读量:5107 次
发布时间:2019-06-13

本文共 2783 字,大约阅读时间需要 9 分钟。

使用不同语言进行配置(configuration languages)

webpack 接受以多种编程和数据语言编写的配置文件。支持的文件扩展名列表,可以在  包中找到。使用 ,webpack 可以处理许多不同类型的配置文件。

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

类似的,为了使用  来书写配置文件, 同样需要安装相关的依赖:

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 配置文件:

感谢 

首先安装依赖:

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 pluginconst CustomPlugin = config => ({  ...config,  name: 'custom-plugin'});export default (  
);

如果你在其他地方也使用了 Babel 并且把模块(modules)设置为了 false,那么你要么同时维护两份单独的 .babelrc 文件,要么使用 conts jsxobj = requrie('jsxobj'); 并且使用 moduel.exports 而不是新版本的 import 和 export 语法。这是因为尽管 Node.js 已经支持了许多 ES6 的新特性,然而还无法支持 ES6 模块语法。  

  

  

  

  

  

  

  

  

转载于:https://www.cnblogs.com/wntd/p/9181469.html

你可能感兴趣的文章
HBase配置性能调优(转)
查看>>
MyEclipse10安装SVN插件
查看>>
[转]: 视图和表的区别和联系
查看>>
Regular Experssion
查看>>
python中的字符编码
查看>>
图论例题1——NOIP2015信息传递
查看>>
uCOS-II中的任务切换-图解多种任务调度时机与问题
查看>>
CocoaPods的安装和使用那些事(Xcode 7.2,iOS 9.2,Swift)
查看>>
Android 官方新手指导教程
查看>>
幸运转盘v1.0 【附视频】我的Android原创处女作,请支持!
查看>>
UseIIS
查看>>
为什么int型最大的数是2147483647
查看>>
数据库连接的三层架构
查看>>
集合体系
查看>>
vi命令提示:Terminal too wide
查看>>
nyoj 5 Binary String Matching(string)
查看>>
引用 移植Linux到s3c2410上
查看>>
BizTalk 2010 单机安装
查看>>
人与人之间的差距是从大学开始的
查看>>
vue 开发过程中遇到的问题
查看>>