【发布时间】：2017-12-01 13:43:04
【问题描述】：
我正在使用 webpack 构建我的应用程序（angular2/typescript），我创建了两个文件，一个用于我的代码，一个用于供应商。但我想要第三个文件来分隔我的配置（主要用于 API_ENDPOINT），它直接在我的代码中使用。
如何使用我的配置文件 (config.ts) 使用加载器构建我的应用程序，但将其从生成的 Js 文件中排除？
目前
<!DOCTYPE html>
<html>
<head>
<base href="/configuration/" >
<title>Gestion de la configuration technique</title>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href=./assets/logo.png />
<link href="vendor.841ccc40b7395ddc1da4.css" rel="stylesheet">
<link href="app.841ccc40b7395ddc1da4.css" rel="stylesheet">
</head>
<body>
<sg-conf>loading ...</sg-conf>
<script type="text/javascript" src="vendor.841ccc40b7395ddc1da4.js"></script>
<script type="text/javascript" src="app.841ccc40b7395ddc1da4.js"></script>
</body>
</html>
预期
<!DOCTYPE html>
<html>
<head>
<base href="/configuration/" >
<title>Gestion de la configuration technique</title>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<link rel="shortcut icon" href=./assets/logo.png />
<link href="vendor.841ccc40b7395ddc1da4.css" rel="stylesheet">
<link href="app.841ccc40b7395ddc1da4.css" rel="stylesheet">
</head>
<body>
<sg-conf>loading ...</sg-conf>
<script type="text/javascript" src="vendor.841ccc40b7395ddc1da4.js"></script>
<script type="text/javascript" src="app.841ccc40b7395ddc1da4.js"></script>
<script type="text/javascript" src="config.js"></script>
</body>
</html>
我想从 app.js 中排除的文件 src/config.ts
export class Config {
static apiUrl = (process.env.ENV === "prod" ? "xxxxxxx" : "http://localhost:8080/");
static token = (process.env.ENV === "prod" ? "aaaaaa" : "bbbbb");
}
我合并了两个 webpack 配置文件，first：
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var helpers = require('./helpers');
var path = require('path');
module.exports = {
entry: {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts',
'config' : './src/config.ts'
},
resolve: {
extensions: ['', '.js', '.ts']
},
module: {
loaders: [
{
test: /\.ts$/,
loaders: [/*'console',*/ 'awesome-typescript-loader', 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html'
},
{
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "url-loader?limit=10000&mimetype=application/font-woff"
},
{
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: "file-loader"
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'file?name=assets/[name].[hash].[ext]'
},
{
test: /\.css$/,
exclude: helpers.root('src', 'app'),
loader: ExtractTextPlugin.extract('style', 'css?sourceMap')
},
{
test: /\.css$/,
include: helpers.root('src', 'app'),
loader: 'raw'
}
]
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
name: ['app', 'vendor', 'polyfills', 'config']
}),
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new CopyWebpackPlugin([
{ from: 'src/assets', to: 'assets' }
]),
],
tslint: {
"configuration" : {
"extends": "tslint:recommended",
"rulesDirectory": [
"node_modules/codelyzer"
],
"rules":{
"directive-selector-name": [true, "camelCase"],
"component-selector-name": [true, "kebab-case"],
"directive-selector-type": [true, "attribute"],
"component-selector-type": [true, "element"],
"directive-selector-prefix": [true, "sg"],
"component-selector-prefix": [true, "sg"],
"use-input-property-decorator": true,
"use-output-property-decorator": true,
"use-host-property-decorator": true,
"no-attribute-parameter-decorator": true,
"no-input-rename": true,
"no-output-rename": true,
"no-forward-ref": true,
"use-life-cycle-interface": true,
"use-pipe-transform-interface": true,
"pipe-naming": [true, "camelCase", "sg"],
"component-class-suffix": true,
"directive-class-suffix": true,
"import-destructuring-spacing": true,
"templates-use-public": true,
"no-access-missing-member": true,
"invoke-injectable": true
}
},
emitErrors: true,
failOnHint: true,
fileOutput: {
ext: "xml",
clean: true,
header: "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<checkstyle version=\"5.7\">",
footer: "</checkstyle>"
}
}
};
第二：
var webpack = require('webpack');
var webpackMerge = require('webpack-merge');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var commonConfig = require('./webpack.common.js');
var WebpackBaseHref = require('webpack-base-href');
var helpers = require('./helpers');
var path = require('path');
const ENV = process.env.NODE_ENV = process.env.ENV = 'prod';
module.exports = [ webpackMerge(commonConfig, {
devtool: 'source-map',
output: {
path: helpers.root('dist'),
publicPath: '',
filename: '[name].[hash].js',
chunkFilename: '[id].[hash].chunk.js'
},
htmlLoader: {
minimize: false // workaround for ng2
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618
mangle: {
keep_fnames: true
}
}),
new ExtractTextPlugin('[name].[hash].css'),
new webpack.DefinePlugin({
'process.env': {
'ENV': (ENV && JSON.stringify(ENV)) || 'prod'
}
}),
new WebpackBaseHref.WebpackBaseHref({
baseHref: '/configuration/'
})
]
})];
【问题讨论】：
标签： angular typescript webpack