Webpack, wie man Produktionscode erstellt und wie man ihn verwendet

Sie können die Plugins wie von @Vikramaditya vorgeschlagen hinzufügen. Dann wird der Produktionsbuild generiert. Sie müssen den Befehl ausführen

webpack -p --config ./webpack.production.config.js

Das -p weist webpack an, einen Produktionsbuild zu generieren. Sie müssen das Erstellungsskript in package.json ändern, um das Produktionsflag einzuschließen.

Verwenden Sie diese Plugins, um Ihren Produktionsaufbau zu optimieren:

  new webpack.optimize.CommonsChunkPlugin('common'),
  new webpack.optimize.DedupePlugin(),
  new webpack.optimize.UglifyJsPlugin(),
  new webpack.optimize.AggressiveMergingPlugin()

Ich habe kürzlich erfahren, wie compression-webpack-plugin Ihr Ausgabebündel komprimiert, um es zu verkleinern. Fügen Sie dies ebenfalls in die oben aufgeführte Liste der Plugins ein, um Ihren Produktionscode weiter zu optimieren.

new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0.8
})

Die serverseitige dynamische gzip-Komprimierung wird aufgrund der hohen CPU-Auslastung nicht für die Bereitstellung statischer clientseitiger Dateien empfohlen.

Lerne das einfach selbst. Ich werde die zweite Frage beantworten:

2. Wie benutze ich diese Dateien? Zur Zeit verwende ich den webpack-dev-server, um die Anwendung auszuführen.

Anstatt den webpack-dev-server zu verwenden, können Sie einfach einen "Express" ausführen. benutze npm install "express" und erstelle eine server.js im Hauptverzeichnis des Projekts, ungefähr so:

var path = require("path");
var express = require("express");

var DIST_DIR = path.join(__dirname, "build");
var PORT = 3000;
var app = express();

//Serving the files on the dist folder
app.use(express.static(DIST_DIR));

//Send index.html when the user access the web
app.get("*", function (req, res) {
  res.sendFile(path.join(DIST_DIR, "index.html"));
});

app.listen(PORT);

Fügen Sie dann in package.json ein Skript hinzu:

"start": "node server.js"

Zum Schluss starte die App: npm run start, um den Server zu starten

Ein detailliertes Beispiel finden Sie unter: https://alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/ (Der Beispielcode ist nicht kompatibel mit dem neueste Pakete, aber es wird mit kleinen Verbesserungen funktionieren)

Sie können das argv npm-Modul verwenden (installieren Sie es, indem Sie npm install argv --save ausführen), um Parameter in Ihr Webpack aufzunehmen. config.js Datei und für die Produktion verwenden Sie - p flag "build": "webpack -p" können Sie die Bedingung in der Datei webpack.config.js wie folgt hinzufügen

plugins: [
    new webpack.DefinePlugin({
        'process.env':{
            'NODE_ENV': argv.p ? JSON.stringify('production') : JSON.stringify('development')
        }
    })
]

Und das ist es.

Das wird dir helfen.

plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        // This has effect on the react lib size
        'NODE_ENV': JSON.stringify('production'),
      }
    }),
    new ExtractTextPlugin("bundle.css", {allChunks: false}),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.OccurrenceOrderPlugin(),
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.UglifyJsPlugin({
      mangle: true,
      compress: {
        warnings: false, // Suppress uglification warnings
        pure_getters: true,
        unsafe: true,
        unsafe_comps: true,
        screw_ie8: true
      },
      output: {
        comments: false,
      },
      exclude: [/\.min\.js$/gi] // skip pre-minified libs
    }),
    new webpack.IgnorePlugin(/^\.\/locale$/, [/moment$/]), //https://stackoverflow.com/questions/25384360/how-to-prevent-moment-js-from-loading-locales-with-webpack
    new CompressionPlugin({
      asset: "[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0
    })
  ],

Zusätzlich zu Gilson PJ Antwort:

 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.optimize.DedupePlugin(),
 new webpack.optimize.UglifyJsPlugin(),
 new webpack.optimize.AggressiveMergingPlugin()

mit

"scripts": {
    "build": "NODE_ENV=production webpack -p --config ./webpack.production.config.js"
},

weil das versucht, deinen Code zweimal zu hässlich zu machen. Weitere Informationen finden Sie unter https://webpack.github.io/docs/cli.html#production-shortcut-p .

Sie können dies beheben, indem Sie das UglifyJsPlugin aus dem Plugins-Array entfernen oder das OccurrenceOrderPlugin hinzufügen und das "-p" -Flag entfernen. Eine mögliche Lösung wäre also

 new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.optimize.DedupePlugin(),
 new webpack.optimize.UglifyJsPlugin(),
 new webpack.optimize.OccurrenceOrderPlugin(),
 new webpack.optimize.AggressiveMergingPlugin()

und

"scripts": {
    "build": "NODE_ENV=production webpack --config ./webpack.production.config.js"
},

Wenn Sie in Ihrer webpack.dev.config und Ihrer webpack.prod.config viel doppelten Code haben, können Sie einen booleschen isProd verwenden, um bestimmte Funktionen nur in bestimmten Situationen zu aktivieren, und nur eine einzige webpack.config .js Datei.

const isProd = (process.env.NODE_ENV === 'production');

 if (isProd) {
     plugins.Push(new AotPlugin({
      "mainPath": "main.ts",
      "hostReplacementPaths": {
        "environments/index.ts": "environments/index.prod.ts"
      },
      "exclude": [],
      "tsConfigPath": "src/tsconfig.app.json"
    }));
    plugins.Push(new UglifyJsPlugin({
      "mangle": {
        "screw_ie8": true
      },
      "compress": {
        "screw_ie8": true,
        "warnings": false
      },
      "sourceMap": false
    }));
  }

Übrigens: Das DedupePlugin Plugin wurde aus dem Webpack entfernt. Sie sollten es aus Ihrer Konfiguration entfernen.

UPDATE:

Zusätzlich zu meiner vorherigen Antwort:

Wenn Sie Ihren Code zur Veröffentlichung ausblenden möchten, versuchen Sie enclosejs.com . Es ermöglicht Ihnen:

• erstellen Sie eine Release-Version Ihrer Anwendung ohne Quellen
• erstellen Sie ein selbstextrahierendes Archiv oder Installationsprogramm
• Erstellen Sie eine GUI-Anwendung für geschlossene Quellen
• Legen Sie Ihr Vermögen in die ausführbare Datei

Du kannst es mit npm install -g enclose Installieren