Webpackの角2：ベンダーファイルのライブラリにアクセスできない

Question

My Angular 2.0.2アプリはWebpackを使用しています。私はvendors.tsファイルを使用して、私が使用したい外部JavaScriptをインポートします。 （vendors.ts中）

例：

import '../node_modules/moment/min/moment-with-locales.min.js'; 

これを実行した後、私のベンダー・バンドル・ファイルには、「モーメントJS」のコードが含まれていますが、私は自分のアプリケーションで使用することはできません。

それは言う：

momentjsがDATEFORMATで必要とされます。あなたのhtmlに>」を追加してください 例外：。。私は手動で私のindex.htmlファイル内のスクリプトタグへの参照を追加する場合モーメントが

が定義されていない、すべての作品、私は同じ問題を抱えているすべての外部からロードされるライブラリのために、だけではなく、 "モーメントJS"

これは私の全体のWebPACKの設定です：私は間違っ

// Core stuff 
var path = require('path'); 
var webpack = require('webpack'); 

// Plugins 
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; 
var autoprefixer = require('autoprefixer'); 
var HtmlWebpackPlugin = require('html-webpack-plugin'); 
var ExtractTextPlugin = require('extract-text-webpack-plugin'); 
var CopyWebpackPlugin = require('copy-webpack-plugin'); 
var DashboardPlugin = require('webpack-dashboard/plugin'); 
var ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; 

// Get NPM lifecycle event to identify the environment 
var ENV = process.env.npm_lifecycle_event; 
var isTestWatch = ENV === 'test-watch'; 
var isTest = ENV === 'test' || isTestWatch; 
var isProd = ENV === 'build'; 

module.exports = function makeWebpackConfig() { 

// This is the object where all configuration gets set 
var config = {}; 

// Devltool (http://webpack.github.io/docs/configuration.html#devtool) 
// Type of sourcemap to use per build type 
if (isProd) { 

config.devtool = 'source-map'; 

} else if (isTest) { 

config.devtool = 'inline-source-map'; 

} 
else { 

config.devtool = 'eval-source-map'; 

} 

// Entry (http://webpack.github.io/docs/configuration.html#entry) 
config.entry = isTest ? {} : { 
'polyfills': './src/polyfills.ts', 
'vendor': './src/vendor.ts', 
'app': './src/main.ts' 
}; 

// Output (http://webpack.github.io/docs/configuration.html#output) 
config.output = isTest ? {} : { 
path: root('dist'), 
publicPath: isProd ? '/' : 'http://localhost:3000/', 
filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js', 
chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js' 
}; 

// Resolve (http://webpack.github.io/docs/configuration.html#resolve) 
config.resolve = { 
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'], // Only discover files that have those extensions 
}; 

var atlOptions = ''; 
if (isTest && !isTestWatch) { 
atlOptions = 'inlineSourceMap=true&sourceMap=false'; // "awesome-typescript-loader" needs to output inlineSourceMap for code coverage to work with source maps 
} 

// Loaders (http://webpack.github.io/docs/configuration.html#module-loaders) 
config.module = { 
rules: [ 

    // Support for TypeScript (.ts) files 
    { 
    test: /\.ts$/, 
    loaders: [ 
     'awesome-typescript-loader?' + atlOptions, 
     'angular2-template-loader', 
     '@angularclass/hmr-loader', 
     'angular2-router-loader' 
    ], 
    exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/] 
    }, 

    // Copy assets to output 
    { 
    test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
    loader: 'file?name=fonts/[name].[hash].[ext]?' 
    }, 

    // Support for *.json files. 
    { 
    test: /\.json$/, 
    loader: 'json' 
    }, 

    // Support for CSS as raw text 
    // use 'null' loader in test mode (https://github.com/webpack/null-loader) 
    // all css in src/style will be bundled in an external css file 
    { 
    test: /\.css$/, 
    exclude: root('src', 'app'), 
    loader: isTest ? 'null' : ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css', 'postcss']}) 
    }, 


    // support for .scss files 
    // use 'null' loader in test mode (https://github.com/webpack/null-loader) 
    // all css in src/style will be bundled in an external css file 
    { 
    test: /\.scss$/, 
    exclude: root('src', 'app'), 
    loader: isTest ? 'null' : ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css', 'postcss', 'sassLoader']}) 
    }, 

    // Support for .html as raw text 
    { 
    test: /\.html$/, 
    loader: 'raw', 
    exclude: root('src', 'public') 
    } 

    ] 
    }; 

    if (isTest && !isTestWatch) { 
    // instrument only testing sources with Istanbul, covers ts files 
    config.module.rules.push({ 
    test: /\.ts$/, 
    enforce: 'post', 
    include: path.resolve('src'), 
    loader: 'istanbul-instrumenter-loader', 
    exclude: [/\.spec\.ts$/, /\.e2e\.ts$/, /node_modules/] 
    }); 
    } 

    if (!isTest || !isTestWatch) { 
    // tslint support 
    config.module.rules.push({ 
    test: /\.ts$/, 
    enforce: 'pre', 
    loader: 'tslint' 
    }); 
    } 

    // Plugins (http://webpack.github.io/docs/configuration.html#plugins) 
    config.plugins = [ 

// Define env variables to help with builds (https://webpack.github.io/docs/list-of-plugins.html#defineplugin) 
    new webpack.DefinePlugin({ 
    'process.env': { 
    ENV: JSON.stringify(ENV) 
    } 
}), 

// Workaround needed for Angular 2 (angular/angular#11580) 
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, root('./src')), 

// Tslint configuration for Webpack 2 
new webpack.LoaderOptionsPlugin({ 
    options: { 

    // Apply the tslint loader as pre/postLoader (https://github.com/wbuchwalter/tslint-loader) 
    tslint: { 
     emitErrors: false, 
     failOnHint: false 
    }, 

    // Sass (https://github.com/jtangelder/sass-loader) 
    sassLoader: { 
     //includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")] 
    }, 

    //PostCSS (https://github.com/postcss/autoprefixer-core) 
    postcss: [ 
     autoprefixer({ 
     browsers: ['last 2 version'] 
     }) 
    ] 

    } 
}), 

new webpack.ProvidePlugin({ 
    jQuery: 'jquery', 
    $: 'jquery', 
    jquery: 'jquery' 
}) 

]; 

if (!isTest && !isProd) { 
    config.plugins.push(new DashboardPlugin()); 
} 

if (!isTest && !isTestWatch) { 
config.plugins.push(

    new ForkCheckerPlugin(), 

    // Generate common chunks if necessary (https://webpack.github.io/docs/code-splitting.html - https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin) 
    new CommonsChunkPlugin({ 
    name: ['vendor', 'polyfills'] 
    }), 

    // Inject script and link tags into html files (https://github.com/ampedandwired/html-webpack-plugin) 
    new HtmlWebpackPlugin({ 
    template: './src/public/index.html', 
    chunksSortMode: 'dependency' 
    }), 

    // Extract css files (https://github.com/webpack/extract-text-webpack-plugin) 
    new ExtractTextPlugin({filename: 'css/[name].[hash].css', disable: !isProd}) 

); 
} 

// Add build specific plugins 
if (isProd) { 
config.plugins.push(

    // Only emit files when there are no errors (http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin) 
    new webpack.NoErrorsPlugin(), 

    // Dedupe modules in the output (http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin) 
    // new webpack.optimize.DedupePlugin(), 

    // Minify all javascript, switch loaders to minimizing mode (http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin) 
    new webpack.optimize.UglifyJsPlugin({ 
    sourceMap: true, 
    mangle: { 
     keep_fnames: true 
    } 
    }), 

    // Copy assets from the public folder (https://github.com/kevlened/copy-webpack-plugin) 
    new CopyWebpackPlugin([{ 
    from: root('src/public') 
    }]) 

); 
} 

// Dev server configuration (http://webpack.github.io/docs/configuration.html#devserver - http://webpack.github.io/docs/webpack-dev-server.html) 
config.devServer = { 
contentBase: './src/public', 
historyApiFallback: true, 
quiet: true, 
stats: 'minimal' // none (or false), errors-only, minimal, normal (or true) and verbose 
}; 

return config; 
}(); 

// Helper functions 
function root(args) { 
args = Array.prototype.slice.call(arguments, 0); 
return path.join.apply(path, [__dirname].concat(args)); 
} 

何をやっている

Answer 1

を私の知る限りとして？知っていると、node_modulesフォルダをvendors.tsファイルに追加する必要はありません。

使用すると、実行します。moment/min/moment-with-locales.min.js

はまた、あなたはWebPACKのコンフィグが本当にためにではないようですね。私はたぶん、あなたは、いくつかの角度WebPACKのスタータを試してみてください。..

を全く.entryか.resolveなどを見ていないよ： "node_modules" フォルダなしで輸入

• Angular Class
• Qdouble