強制的な角のgz生成

Question

私は、標準のファイル+ .gzバージョンのものが入ったdistフォルダを取得しようとしています。私はng ejectを使ってwebpack.config.jsファイルを入手したので、圧縮プラグインhttps://github.com/webpack-contrib/compression-webpack-pluginを追加することができました。最後のプラグインとしてnew CompressPlugin({})を追加し、.angular-cli.jsonファイルにejected: falseとマークしました。

私はng buildを実行すると、期待していた.gzip/.gzファイルが生成されません。

私に行方不明または間違っていることがありますか？ほとんどng newによって生成されたフルWebPACKのファイルは、（次のとおりです。

const fs = require('fs'); 
const path = require('path'); 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const ProgressPlugin = require('webpack/lib/ProgressPlugin'); 
const CircularDependencyPlugin = require('circular-dependency-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const autoprefixer = require('autoprefixer'); 
const postcssUrl = require('postcss-url'); 
const cssnano = require('cssnano'); 
const CompressionPlugin = require("compression-webpack-plugin"); 

const { NoEmitOnErrorsPlugin, SourceMapDevToolPlugin, NamedModulesPlugin } = require('webpack'); 
const { NamedLazyChunksWebpackPlugin, BaseHrefWebpackPlugin } = require('@angular/cli/plugins/webpack'); 
const { CommonsChunkPlugin } = require('webpack').optimize; 
const { AotPlugin } = require('@ngtools/webpack'); 

const nodeModules = path.join(process.cwd(), 'node_modules'); 
const realNodeModules = fs.realpathSync(nodeModules); 
const genDirNodeModules = path.join(process.cwd(), 'src', '$$_gendir', 'node_modules'); 
const entryPoints = ["inline","polyfills","sw-register","styles","vendor","main"]; 
const minimizeCss = false; 
const baseHref = ""; 
const deployUrl = ""; 
const postcssPlugins = function() { 
     // safe settings based on: https://github.com/ben-eb/cssnano/issues/358#issuecomment-283696193 
     const importantCommentRe = /@preserve|@license|[@#]\s*source(?:Mapping)?URL|^!/i; 
     const minimizeOptions = { 
      autoprefixer: false, 
      safe: true, 
      mergeLonghand: false, 
      discardComments: { remove: (comment) => !importantCommentRe.test(comment) } 
     }; 
     return [ 
      postcssUrl({ 
       url: (URL) => { 
        // Only convert root relative URLs, which CSS-Loader won't process into require(). 
        if (!URL.startsWith('/') || URL.startsWith('//')) { 
         return URL; 
        } 
        if (deployUrl.match(/:\/\//)) { 
         // If deployUrl contains a scheme, ignore baseHref use deployUrl as is. 
         return `${deployUrl.replace(/\/$/, '')}${URL}`; 
        } 
        else if (baseHref.match(/:\/\//)) { 
         // If baseHref contains a scheme, include it as is. 
         return baseHref.replace(/\/$/, '') + 
          `/${deployUrl}/${URL}`.replace(/\/\/+/g, '/'); 
        } 
        else { 
         // Join together base-href, deploy-url and the original URL. 
         // Also dedupe multiple slashes into single ones. 
         return `/${baseHref}/${deployUrl}/${URL}`.replace(/\/\/+/g, '/'); 
        } 
       } 
      }), 
      autoprefixer(), 
     ].concat(minimizeCss ? [cssnano(minimizeOptions)] : []); 
    }; 




module.exports = { 
    "resolve": { 
    "extensions": [ 
     ".ts", 
     ".js" 
    ], 
    "modules": [ 
     "./node_modules", 
     "./node_modules" 
    ], 
    "symlinks": true 
    }, 
    "resolveLoader": { 
    "modules": [ 
     "./node_modules", 
     "./node_modules" 
    ] 
    }, 
    "entry": { 
    "main": [ 
     "./src\\main.ts" 
    ], 
    "polyfills": [ 
     "./src\\polyfills.ts" 
    ], 
    "styles": [ 
     "./src\\styles.css" 
    ] 
    }, 
    "output": { 
    "path": path.join(process.cwd(), "dist"), 
    "filename": "[name].bundle.js", 
    "chunkFilename": "[id].chunk.js" 
    }, 
    "module": { 
    "rules": [ 
     { 
     "enforce": "pre", 
     "test": /\.js$/, 
     "loader": "source-map-loader", 
     "exclude": [ 
      /(\\|\/)node_modules(\\|\/)/ 
     ] 
     }, 
     { 
     "test": /\.html$/, 
     "loader": "raw-loader" 
     }, 
     { 
     "test": /\.(eot|svg|cur)$/, 
     "loader": "file-loader?name=[name].[hash:20].[ext]" 
     }, 
     { 
     "test": /\.(jpg|png|webp|gif|otf|ttf|woff|woff2|ani)$/, 
     "loader": "url-loader?name=[name].[hash:20].[ext]&limit=10000" 
     }, 
     { 
     "exclude": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.css$/, 
     "use": [ 
      "exports-loader?module.exports.toString()", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      } 
     ] 
     }, 
     { 
     "exclude": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.scss$|\.sass$/, 
     "use": [ 
      "exports-loader?module.exports.toString()", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "sass-loader", 
      "options": { 
       "sourceMap": false, 
       "precision": 8, 
       "includePaths": [] 
      } 
      } 
     ] 
     }, 
     { 
     "exclude": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.less$/, 
     "use": [ 
      "exports-loader?module.exports.toString()", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "less-loader", 
      "options": { 
       "sourceMap": false 
      } 
      } 
     ] 
     }, 
     { 
     "exclude": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.styl$/, 
     "use": [ 
      "exports-loader?module.exports.toString()", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "stylus-loader", 
      "options": { 
       "sourceMap": false, 
       "paths": [] 
      } 
      } 
     ] 
     }, 
     { 
     "include": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.css$/, 
     "use": [ 
      "style-loader", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      } 
     ] 
     }, 
     { 
     "include": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.scss$|\.sass$/, 
     "use": [ 
      "style-loader", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "sass-loader", 
      "options": { 
       "sourceMap": false, 
       "precision": 8, 
       "includePaths": [] 
      } 
      } 
     ] 
     }, 
     { 
     "include": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.less$/, 
     "use": [ 
      "style-loader", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "less-loader", 
      "options": { 
       "sourceMap": false 
      } 
      } 
     ] 
     }, 
     { 
     "include": [ 
      path.join(process.cwd(), "src\\styles.css") 
     ], 
     "test": /\.styl$/, 
     "use": [ 
      "style-loader", 
      { 
      "loader": "css-loader", 
      "options": { 
       "sourceMap": false, 
       "importLoaders": 1 
      } 
      }, 
      { 
      "loader": "postcss-loader", 
      "options": { 
       "ident": "postcss", 
       "plugins": postcssPlugins 
      } 
      }, 
      { 
      "loader": "stylus-loader", 
      "options": { 
       "sourceMap": false, 
       "paths": [] 
      } 
      } 
     ] 
     }, 
     { 
     "test": /\.ts$/, 
     "loader": "@ngtools/webpack" 
     } 
    ] 
    }, 
    "plugins": [ 
    new NoEmitOnErrorsPlugin(), 
    new CopyWebpackPlugin([ 
     { 
     "context": "src", 
     "to": "", 
     "from": { 
      "glob": "assets/**/*", 
      "dot": true 
     } 
     }, 
     { 
     "context": "src", 
     "to": "", 
     "from": { 
      "glob": "favicon.ico", 
      "dot": true 
     } 
     } 
    ], { 
     "ignore": [ 
     ".gitkeep" 
     ], 
     "debug": "warning" 
    }), 
    new ProgressPlugin(), 
    new CircularDependencyPlugin({ 
     "exclude": /(\\|\/)node_modules(\\|\/)/, 
     "failOnError": false 
    }), 
    new NamedLazyChunksWebpackPlugin(), 
    new HtmlWebpackPlugin({ 
     "template": "./src\\index.html", 
     "filename": "./index.html", 
     "hash": false, 
     "inject": true, 
     "compile": true, 
     "favicon": false, 
     "minify": false, 
     "cache": true, 
     "showErrors": true, 
     "chunks": "all", 
     "excludeChunks": [], 
     "title": "Webpack App", 
     "xhtml": true, 
     "chunksSortMode": function sort(left, right) { 
     let leftIndex = entryPoints.indexOf(left.names[0]); 
     let rightindex = entryPoints.indexOf(right.names[0]); 
     if (leftIndex > rightindex) { 
      return 1; 
     } 
     else if (leftIndex < rightindex) { 
      return -1; 
     } 
     else { 
      return 0; 
     } 
    } 
    }), 
    new BaseHrefWebpackPlugin({}), 
    new CommonsChunkPlugin({ 
     "name": [ 
     "inline" 
     ], 
     "minChunks": null 
    }), 
    new CommonsChunkPlugin({ 
     "name": [ 
     "vendor" 
     ], 
     "minChunks": (module) => { 
       return module.resource 
        && (module.resource.startsWith(nodeModules) 
         || module.resource.startsWith(genDirNodeModules) 
         || module.resource.startsWith(realNodeModules)); 
      }, 
     "chunks": [ 
     "main" 
     ] 
    }), 
    new SourceMapDevToolPlugin({ 
     "filename": "[file].map[query]", 
     "moduleFilenameTemplate": "[resource-path]", 
     "fallbackModuleFilenameTemplate": "[resource-path]?[hash]", 
     "sourceRoot": "webpack:///" 
    }), 
    new CommonsChunkPlugin({ 
     "name": [ 
     "main" 
     ], 
     "minChunks": 2, 
     "async": "common" 
    }), 
    new NamedModulesPlugin({}), 
    new AotPlugin({ 
     "mainPath": "main.ts", 
     "replaceExport": false, 
     "hostReplacementPaths": { 
     "environments\\environment.ts": "environments\\environment.ts" 
     }, 
     "exclude": [], 
     "tsConfigPath": "src\\tsconfig.app.json", 
     "skipCodeGeneration": true 
    }), 
    new CompressionPlugin({}) 
    ], 
    "node": { 
    "fs": "empty", 
    "global": true, 
    "crypto": "empty", 
    "tls": "empty", 
    "net": "empty", 
    "process": true, 
    "module": false, 
    "clearImmediate": false, 
    "setImmediate": false 
    }, 
    "devServer": { 
    "historyApiFallback": true 
    } 
}; 

私は@angular/cli1.4.4を使用してい

注私はそれをやっている主な理由は明らかに私のベンダーので、いくつかのSEOの提言を改善することです。あなたのページには1つのCSSリソースがブロックされています。これはあなたのページをレンダリングするのに遅れを生じさせ、サードパーティのCSSだけを含んでいます - 実際はブートストラップ+フォント - 素晴らしいものです。これを防ぐために私は圧縮を考えました。私はまた、Webサーバが自動的に圧縮して.gzファイルを提供すると思っていましたが、そのテストw ouldが適用されます。

ご協力いただきありがとうございます。ありがとう

Answer 1

排出されたアプリケーションのビルドのみがルートwebpack.config.jsファイルに公開されて処理されます。排出されない（またはejected: falseに設定された）アプリケーションは、このwebpack.config.jsファイルを完全に無視します。

gzippedファイルを使用するには、取り出したアプリケーションで作業し、package.jsonに自動的に追加された新しいnpmスクリプトを使用する必要があります。代わりに 'NGビルド' の

、今あなたが実行する必要があります：役立つかもしれ

npm run build 

私の関連の答え：

• Angular4 build - gzip missing
• How to undo Angular 2 Cli ng-eject