1
私はAngular2アプリの開発とビルドにwebpackを使用しています。アセット最適化中にJenkinsパイプラインにWebpackビルドが滞っています
私のマシンに自分のソース（webpack --profile --bail）をビルドすると、webpackプロセスは正常に終了します。
私ジェンキンスCIパイプラインでを同じコマンドを使用している場合、プロセスはおそらくhtml-webpack-pluginを使用した後、またはextract-text-webpack-pluginを使用する前に、資産の最適化に永遠に立ち往生を取得します。ここで
はジェンキンスパイプラインのステップです：
container(name: 'webpack'){
git 'http://gogs/SMITE/smite-gui-manager.git'
echo 'Installing node modules'
sh 'npm install'
echo 'Building application to /dist'
sh 'rimraf dist && webpack --progress --profile --bail --verbose'
stage 'Canary release'
newVersion = performCanaryRelease {}
}
使用コンテナが必要なバイナリが含まれており、上記の手順が必要なすべてのnode_modulesをインストールする必要があり、そのビルド環境が同じである必要があります。ここで
は異なる出力です：私のマシン上で
：ジェンキンスビルダーで
[...]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 544 kB 0
Entrypoint undefined = index.html
[0] ./~/html-webpack-plugin/~/lodash/lodash.js 540 kB {0} [depth 1] [built]
cjs require ./../../node_modules/html-webpack-plugin/node_modules/lodash/lodash.js [3] ./~/html-webpack-plugin/lib/loader.js!./src/public/index.html 1:8-89
[] -> factory:205ms building:2526ms = 2731ms
[1] (webpack)/buildin/global.js 509 bytes {0} [depth 2] [built]
cjs require global [0] ./~/html-webpack-plugin/~/lodash/lodash.js 1:0-47
[] -> factory:395ms building:408ms = 803ms
[2] (webpack)/buildin/module.js 517 bytes {0} [depth 2] [built]
cjs require module [0] ./~/html-webpack-plugin/~/lodash/lodash.js 1:0-47
[] -> factory:395ms building:409ms = 804ms
[3] ./~/html-webpack-plugin/lib/loader.js!./src/public/index.html 873 bytes {0} [depth 0] [built]
factory:31ms building:22ms = 53ms
Child extract-text-webpack-plugin:
Asset Size Chunks Chunk Names
fonts/icons.25a32416abee198dd821b0b17a198a8f.eot? 76.5 kB
fonts/icons.d7c639084f684d66a1bc66855d193ed8.svg? 392 kB
fonts/icons.1dc35d25e61d819a9c357074014867ab.ttf? 153 kB
fonts/icons.c8ddf1e5e5bf3682bc7bebf30f394148.woff? 90.4 kB
fonts/icons.e6cf7c6ec7c2d6f670ae9d762604cb0b.woff2? 71.9 kB
fonts/flags.9c74e172f87984c48ddf5c8108cabe67.png? 28.1 kB
Entrypoint undefined = extract-text-webpack-plugin-output-filename
[0] ./semantic/dist/themes/default/assets/fonts/icons.eot 95 bytes {0} [depth 1] [built]
cjs require ./themes/default/assets/fonts/icons.eot [7] ./~/css-loader!./~/postcss-loader!./semantic/dist/semantic.css 6:151450-151500
cjs require ./themes/default/assets/fonts/icons.eot [7] ./~/css-loader!./~/postcss-loader!./semantic/dist/semantic.css 6:151523-151573
[] -> factory:6ms building:1ms = 7ms
[1] ./~/css-loader/lib/css-base.js 1.51 kB {0} [depth 1] [built]
cjs require ./../../node_modules/css-loader/lib/css-base.js [7] ./~/css-loader!./~/postcss-loader!./semantic/dist/semantic.css 1:27-85
[] -> factory:5ms building:2ms = 7ms
[2] ./semantic/dist/themes/default/assets/fonts/icons.svg 95 bytes {0} [depth 1] [built]
cjs require ./themes/default/assets/fonts/icons.svg [7] ./~/css-loader!./~/postcss-loader!./semantic/dist/semantic.css 6:151871-151921
[] -> factory:6ms building:3ms = 9ms
[3] ./semantic/dist/themes/default/assets/fonts/icons.ttf 95 bytes {0} [depth 1] [built]
cjs require ./themes/default/assets/fonts/icons.ttf [7] ./~/css-loader!./~/postcss-loader!./semantic/dist/semantic.css 6:151787-151837
[] -> factory:6ms building:2ms = 8ms
[4] ./semantic/dist/themes/default/assets/fonts/icons.woff 96 bytes {0} [depth 1] [built]
cjs require ./themes/default/assets/fonts/icons.woff [7] ./~/css-loader!./~/postcss-loader!./semantic/dist/semantic.css 6:151706-151757
[] -> factory:6ms building:2ms = 8ms
[5] ./semantic/dist/themes/default/assets/fonts/icons.woff2 97 bytes {0} [depth 1] [built]
cjs require ./themes/default/assets/fonts/icons.woff2 [7] ./~/css-loader!./~/postcss-loader!./semantic/dist/semantic.css 6:151623-151675
[] -> factory:6ms building:2ms = 8ms
[6] ./semantic/dist/themes/default/assets/images/flags.png 95 bytes {0} [depth 1] [built]
cjs require ./themes/default/assets/images/flags.png [7] ./~/css-loader!./~/postcss-loader!./semantic/dist/semantic.css 6:115925-115976
[] -> factory:6ms building:1ms = 7ms
[7] ./~/css-loader!./~/postcss-loader!./semantic/dist/semantic.css 732 kB {0} [depth 0] [built]
factory:4ms building:2719ms = 2723ms
Child extract-text-webpack-plugin:
Entrypoint undefined = extract-text-webpack-plugin-output-filename
[0] ./~/css-loader/lib/css-base.js 1.51 kB {0} [depth 1] [built]
cjs require ./../../node_modules/css-loader/lib/css-base.js [1] ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/style/app.scss 1:27-85
[] -> factory:0ms building:1ms = 1ms
[1] ./~/css-loader!./~/postcss-loader!./~/sass-loader!./src/style/app.scss 2.41 kB {0} [depth 0] [built]
factory:12ms building:2793ms = 2805ms
>>> BUILD FINISHED WITHOUT ERROR <<<<
：
[...]
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 1.45 MB 0
Entrypoint undefined = index.html
[0] ./~/lodash/lodash.js 540 kB {0} [depth 1] [built]
cjs require ./../../node_modules/lodash/lodash.js [3] ./~/html-webpack-plugin/lib/loader.js!./src/public/index.html 1:8-56
[] -> factory:522ms building:5253ms = 5775ms
[1] (webpack)/buildin/global.js 509 bytes {0} [depth 2] [built]
cjs require global [0] ./~/lodash/lodash.js 1:0-41
[] -> factory:348ms building:833ms = 1181ms
[2] (webpack)/buildin/module.js 517 bytes {0} [depth 2] [built]
cjs require module [0] ./~/lodash/lodash.js 1:0-41
[] -> factory:348ms building:834ms = 1182ms
[3] ./~/html-webpack-plugin/lib/loader.js!./src/public/index.html 840 bytes {0} [depth 0] [built]
>>> STUCK HERE FOR EVER <<<
念のために、ここにいます私のに記載されている依存関係：
"dependencies": {
"@angular/common": "^2.4.3",
"@angular/compiler": "^2.4.3",
"@angular/core": "^2.4.3",
"@angular/forms": "^2.4.3",
"@angular/http": "^2.4.3",
"@angular/platform-browser": "^2.4.3",
"@angular/platform-browser-dynamic": "^2.4.3",
"@angular/router": "^3.4.3",
"@angular/upgrade": "^2.4.3",
"angular2-logger": "^0.5.1",
"cookie-parser": "^1.4.3",
"core-js": "~2.4.1",
"express-session": "^1.15.0",
"extract-text-webpack-plugin": "^2.0.0-beta.5",
"jquery": "~3.1.1",
"ng2-semantic-ui": "~0.4.7",
"passport": "^0.3.2",
"passport-ldapauth": "^1.0.0",
"reflect-metadata": "~0.1.3",
"rxjs": "~5.1.0",
"semantic-ui": "~2.2.6",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@angularclass/hmr": "^1.0.1",
"@angularclass/hmr-loader": "^3.0.2",
"@types/core-js": "^0.9.0",
"@types/jasmine": "^2.2.29",
"@types/node": "^7.0.4",
"@types/selenium-webdriver": "2.53.39",
"angular2-template-loader": "^0.6.0",
"autoprefixer": "^6.3.2",
"awesome-typescript-loader": "^3.0.0-beta.18",
"codelyzer": "2.0.0-beta.4",
"copy-webpack-plugin": "^4.0.0",
"css-loader": "^0.26.1",
"extract-text-webpack-plugin": "^2.0.0-beta.4",
"file-loader": "^0.10.0",
"html-loader": "^0.4.0",
"html-webpack-plugin": "^2.8.1",
"istanbul-instrumenter-loader": "^1.2.0",
"jasmine-core": "^2.3.4",
"jasmine-spec-reporter": "^3.2.0",
"json-loader": "^0.5.3",
"karma": "1.4.1",
"karma-chrome-launcher": "^2.0.0",
"karma-coverage": "^1.0.0",
"karma-jasmine": "^1.0.2",
"karma-mocha-reporter": "^2.0.3",
"karma-phantomjs-launcher": "^1.0.0",
"karma-remap-istanbul": "0.4.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "2.0.2",
"node-sass": "^4.5.0",
"null-loader": "0.1.1",
"phantomjs-prebuilt": "^2.1.4",
"postcss-loader": "^1.1.0",
"protractor": "^5.1.0",
"pug-html-loader": "^1.0.9",
"raw-loader": "0.5.1",
"remap-istanbul": "^0.8.4",
"rimraf": "^2.5.1",
"sass-loader": "^4.0.0",
"shelljs": "^0.7.0",
"style-loader": "^0.13.0",
"ts-helpers": "^1.1.1",
"tslint": "^4.4.2",
"tslint-loader": "^3.3.0",
"typedoc": "^0.5.1",
"typescript": "2.1.5",
"url-loader": "^0.5.6",
"webpack": "^2.1.0-beta.25",
"webpack-dashboard": "^0.3.0",
"webpack-dev-server": "2.1.0-beta.9"
}
そして、私のWebPACKの設定：
// Helper: root() is defined at the bottom
var path = require('path');
var webpack = require('webpack');
// 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;
/**
* Env
* 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() {
/**
* Config
* Reference: http://webpack.github.io/docs/configuration.html
* This is the object where all configuration gets set
*/
var config = {};
/**
* Devtool
* Reference: 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
* Reference: http://webpack.github.io/docs/configuration.html#entry
*/
config.entry = isTest ? {} : {
'polyfills': './src/polyfills.ts',
'vendor': './src/vendor.ts',
'app': './src/main.ts' // our angular app
};
/**
* Output
* Reference: http://webpack.github.io/docs/configuration.html#output
*/
config.output = isTest ? {} : {
path: root('dist'),
publicPath: isProd ? '/' : 'http://localhost:8080/',
filename: isProd ? 'js/[name].[hash].js' : 'js/[name].js',
chunkFilename: isProd ? '[id].[hash].chunk.js' : '[id].chunk.js'
};
/**
* Resolve
* Reference: http://webpack.github.io/docs/configuration.html#resolve
*/
config.resolve = {
// only discover files that have those extensions
extensions: ['.ts', '.js', '.json', '.css', '.scss', '.html'],
};
var atlOptions = '';
if (isTest && !isTestWatch) {
// awesome-typescript-loader needs to output inlineSourceMap for code coverage to work with source maps.
atlOptions = 'inlineSourceMap=true&sourceMap=false';
}
/**
* Loaders
* Reference: http://webpack.github.io/docs/configuration.html#module-loaders
* List: http://webpack.github.io/docs/list-of-loaders.html
* This handles most of the magic responsible for converting modules
*/
config.module = {
rules: [
// Support for .ts files.
{
test: /\.ts$/,
loaders: ['awesome-typescript-loader?' + atlOptions, 'angular2-template-loader', '@angularclass/hmr-loader'],
exclude: [isTest ? /\.(e2e)\.ts$/ : /\.(spec|e2e)\.ts$/, /node_modules\/(?!(ng2-.+))/]
},
// copy those assets to output
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=fonts/[name].[hash].[ext]?'
},
// Support for *.json files.
{test: /\.json$/, loader: 'json-loader'},
// 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-loader' : ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'postcss-loader']})
},
// all css required in src/app files will be merged in js files
{test: /\.css$/, include: root('src', 'app'), loader: 'raw-loader!postcss-loader'},
// 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|sass)$/,
exclude: root('src', 'app'),
loader: isTest ? 'null-loader' : ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: ['css-loader', 'postcss-loader', 'sass-loader']})
},
// all css required in src/app files will be merged in js files
{test: /\.(scss|sass)$/, exclude: root('src', 'style'), loader: 'raw-loader!postcss-loader!sass-loader'},
// support for .html as raw text
// todo: change the loader to something that adds a hash to images
{test: /\.html$/, loader: 'raw-loader', exclude: root('src', 'public')},
{test: /\.(pug|jade)$/, loader: 'pug-html-loader', 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-loader'
});
}
/**
* Plugins
* Reference: http://webpack.github.io/docs/configuration.html#plugins
* List: http://webpack.github.io/docs/list-of-plugins.html
*/
config.plugins = [
// Exposes jQuery librairy
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
}),
// Define env variables to help with builds
// Reference: https://webpack.github.io/docs/list-of-plugins.html#defineplugin
new webpack.DefinePlugin({
// Environment helpers
'process.env': {
ENV: JSON.stringify(ENV)
}
}),
// Workaround needed for angular 2 angular/angular#11580
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
root('./src') // location of your src
),
// Tslint configuration for webpack 2
new webpack.LoaderOptionsPlugin({
options: {
/**
* Apply the tslint loader as pre/postLoader
* Reference: https://github.com/wbuchwalter/tslint-loader
*/
tslint: {
emitErrors: false,
failOnHint: false
},
/**
* Sass
* Reference: https://github.com/jtangelder/sass-loader
* Transforms .scss files to .css
*/
sassLoader: {
//includePaths: [path.resolve(__dirname, "node_modules/foundation-sites/scss")]
},
/**
* PostCSS
* Reference: https://github.com/postcss/autoprefixer-core
* Add vendor prefixes to your css
*/
postcss: [
autoprefixer({
browsers: ['last 2 version']
})
]
}
})
];
if (!isTest && !isProd) {
config.plugins.push(new DashboardPlugin());
}
if (!isTest && !isTestWatch) {
config.plugins.push(
//new ForkCheckerPlugin(),
// Generate common chunks if necessary
// Reference: https://webpack.github.io/docs/code-splitting.html
// Reference: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin
new CommonsChunkPlugin({
name: ['vendor', 'polyfills']
}),
// Inject script and link tags into html files
// Reference: https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
template: './src/public/index.html',
chunksSortMode: 'dependency'
}),
// Extract css files
// Reference: https://github.com/webpack/extract-text-webpack-plugin
// Disabled when in test mode or not in build mode
new ExtractTextPlugin({filename: 'css/[name].[hash].css', disable: !isProd})
);
}
// Add build specific plugins
if (isProd) {
config.plugins.push(
// Reference: http://webpack.github.io/docs/list-of-plugins.html#noerrorsplugin
// Only emit files when there are no errors
new webpack.NoErrorsPlugin(),
// // Reference: http://webpack.github.io/docs/list-of-plugins.html#dedupeplugin
// // Dedupe modules in the output
// new webpack.optimize.DedupePlugin(),
// Reference: http://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
// Minify all javascript, switch loaders to minimizing mode
new webpack.optimize.UglifyJsPlugin({sourceMap: true, mangle: { keep_fnames: true }}),
// Copy assets from the public folder
// Reference: https://github.com/kevlened/copy-webpack-plugin
new CopyWebpackPlugin([{
from: root('src/public')
}])
);
}
/**
* Dev server configuration
* Reference: http://webpack.github.io/docs/configuration.html#devserver
* Reference: 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
/**
* Proxy
* http://webpack.github.io/docs/webpack-dev-server.html#proxy
* Used to delegate one or multiple path to another server
*/
proxy: {
'/api' : {
target: 'http://localhost:3333',
secure: false
}
}
};
return config;
}();
// Helper functions
function root(args) {
args = Array.prototype.slice.call(arguments, 0);
return path.join.apply(path, [__dirname].concat(args));
}
私は--verboseオプションの使用にもかかわらず、追加のログを取得できませんでしたし、修正する方法を見つけることができませんバグ、どんな考え？