WebPack使用不同语言进行配置
WebPack 使用不同语言进行配置
webpack 接受以多种编程和数据语言编写的。的扩展名列表,可以在 包中找到。使用 ,webpack 可以处理许多不同类型的。
TypeScript
为了用 书写 webpack 的,必须先安装相关依赖:
npm install --save-dev typescript ts-node @types/node @types/webpack
之后就可以使用 TypeScript 书写 webpack 的了:
webpack.con.ts
import path from 'path'; import webpack from 'webpack'; const con: webpack.Conuration = { mode: 'production', entry: './foo.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'foo.bundle.js' } }; export default con;
以上示例假定 webpack 版本 >= 2.7,或者,在 tscon.json 中,具有 esModuleInterop 和 allowSyntheticDefaultImports 这两个新的编译器选项的较新版本 TypeScript。
注意,你还需要核对 tscon.json 。如果 tscon.json 中的 compilerOptions 中的 module 字段是 commonjs ,则配置是正确的,否则 webpack 将因为而构建失败。发生这种情况,是因为 ts-node commonjs 以外的任何模块语法。
这个问题有两种案:
tscon.json。
安装 tscon-paths。
__第选项_是指,打开你的 tscon.json 并查找 compilerOptions。将 target 设置为 "ES5",以及将 module 设置为 "CommonJS"(或者完全移除 module 选项)。
__第二个选项_是指,安装 tscon-paths 包:
npm install --save-dev tscon-paths
然后,为你的 webpack 配置,专门创建单独的 TypeScript 配置:
tscon-for-webpack-con.json
{ "compilerOptions": { "module": "commonjs", "target": "es5" } }
ts-node 可以使用 tscon-path 提供的环境变量来解析 tscon.json 。
然后,设置 tscon-path 提供的环境变量 process.env.TS_NODE_PROJECT,如下所示:
package.json
{ "scripts": { "build": "TS_NODE_PROJECT=\"tscon-for-webpack-con.json\" webpack" } }
CoffeeScript
类似的,为了使用 来书写, 同样需要安装相关的依赖:
npm install --save-dev coffee-script
之后就可以使用 Coffeecript 书写了:
webpack.con.coffee
HtmlWebpackPlugin = require('html-webpack-plugin') webpack = require('webpack') path = require('path') con = 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 = con
Babel and JSX
在以下的例子中,使用了 JSX(React 形式的 javascript)以及 Babel 来创建 JSON 形式的 webpack :
感谢
首先安装依赖:
npm install --save-dev babel-register jsxobj babel-preset-es2015
.babelrc
{ "presets": [ "es2015" ] }
webpack.con.babel.js
import jsxobj from 'jsxobj'; // example of an imported plugin const CustomPlugin = con => ({ ...con, 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 模块语法。