Question

我使用webpack进行开发，并为我的Angular2应用构建目的。

在我的机器上构建我的源（webpack --profile --bail）时，webpack进程正常完成。
在我的Jenkins CI管道中使用相同的命令时，该过程会在资产优化中出现，假设在使用html-webpack-plugin之后或在使用{{1}之前}}

以下是Jenkins管道中的步骤：

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

在Jenkins构建器上：

[...] 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 <<<中列出的依赖项：

package.json

我的webpack配置：

"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" }

尽管使用了// 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)); }选项，但我无法获得任何其他日志，并且无法找到修复错误的方法，任何想法？

Answer 1

似乎节点的版本是罪魁祸首！

我运行了一个nodejs调试器并且没有找到任何其他信息，但我尝试使用不同版本的节点和bingo进行构建！

看起来很奇怪，节点v6.9.0和v.6.9.1（yum repos中的npm依赖）没有表现相同（它是次要的版本更改，加油！）

在两个环境中安装node v7.5.0都可以解决问题！

在资产优化期间，Webpack构建卡在Jenkins管道中

1 个答案: