我正在使用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配置文件，第一个：
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/'
})
]
})];
答案 0 :(得分：1)
我做了一个简单的例子，它正确地生成了我要求的包
const path = require('path');
module.exports = {
context: path.join(__dirname),
entry: {
'index': path.join(__dirname, 'src/index.js'),
'config': path.join(__dirname, 'src/config.js')
},
output: {
path: path.join(__dirname, 'public'),
filename: '[name].bundle.js'
},
module: {
loaders: [
{
test: /(\.js)|(\.jsx)$/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
}
},
]
},
resolve: {
extensions: ['.js', '.jsx']
}
};
都有预期的内容
如果这没有帮助你可以发送给我你的config.ts 如果我有时间的话，我会在es6中做一点精确度我会用打字稿做它，看它是否可以链接到那个但是我怀疑它
答案 1 :(得分：0)
你能告诉我你的webpack配置吗？
因为您需要三个输出文件（内部脚本，供应商脚本和配置），您必须在webpack配置文件中定义：
然后，您可以使用动态工具在html中插入这些文件，因为您的名称将是动态的
希望能帮到你