配置语言 | Configuration Languages

配置语言

TypeScript

npm install --save-dev typescript ts-node @types/node @types/webpack

webpack.config.ts

import * as webpack from 'webpack'; import * as path from 'path'; const config: webpack.Configuration = { entry: './foo.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'foo.bundle.js' } }; export default config;

CoffeeScript

同样,要使用CoffeeScript,您将首先安装必要的依赖关系:

npm install --save-dev coffee-script

然后继续编写配置:

webpack.config.coffee

HtmlWebpackPlugin = require('html-webpack-plugin') webpack = require('webpack') path = require('path') config = 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和JSX

致谢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> <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>