Webpack comment construire un code de production et comment l'utiliser

vous pouvez ajouter les plugins comme suggéré par @Vikramaditya. Puis générer la construction de production. Vous devez exécuter la commande

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

le -p dit à webpack de générer une construction de production. Vous devez changer le script de construction dans le paquet .json pour inclure le drapeau de production.

utilisez ces plugins pour optimiser votre construction de production:

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

j'ai récemment appris à propos de compression-webpack-plugin qui fichiers gzip votre faisceau de sortie pour réduire sa taille. Ajoutez ceci dans la liste des plugins listés ci-dessus pour optimiser votre code de production.

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

la compression gzip dynamique Côté Serveur n'est pas recommandée pour servir des fichiers statiques côté client en raison d'une forte utilisation de CPU.

Vous pouvez utiliser argv npm (module de l'installer en exécutant npm install argv --save ) pour obtenir les paramètres de votre webpack.config.fichier js et que pour la production de -p drapeau "construire": "webpack -p" , vous pouvez ajouter une condition dans webpack.config.fichier js comme ci-dessous

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

Et c'est tout.

j'apprends ça moi-même. Je vais répondre à la deuxième question:

2. Comment utiliser ces fichiers? Actuellement, j'utilise webpack-dev-server pour exécuter l'application.

au lieu d'utiliser webpack-dev-server, Vous pouvez simplement exécuter un"express". utilisez npm install "express" et créez un serveur.js à la racine du projet dir, quelque chose comme:

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);

ensuite, dans le colis.JSON, ajoute un script:

"start": "node server.js"

enfin, lancez l'application: npm run start pour démarrer le serveur

Un exemple détaillé peut être vu à: https://alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup / (le code de l'exemple n'est pas compatible avec les derniers paquets, mais il fonctionnera avec de petits ajustements)

cela vous aidera.

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$/]), ///q/how-to-prevent-moment-js-from-loading-locales-with-webpack-52919/"[path].gz[query]",
      algorithm: "gzip",
      test: /\.js$|\.css$|\.html$/,
      threshold: 10240,
      minRatio: 0
    })
  ],

en plus de Gilson PJ réponse:

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

avec

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

parce qu'il essaie d'uglifier votre code deux fois. Voir https://webpack.github.io/docs/cli.html#production-shortcut-p pour plus d'informations.

vous pouvez corriger cela en enlevant L'UglifyJsPlugin de plugins-array ou ajouter L'OccurrenceOrderPlugin et supprimer le drapeau"- p" -. donc, une solution possible serait

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

et

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

si vous avez beaucoup de code dupliqué dans votre webpack.dev.config et votre webpack.prod.config, vous pouvez utiliser un booléen isProd pour activer certaines fonctionnalités seulement dans certaines situations et n'avoir qu'un seul webpack.config.fichier js.

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
    }));
  }

soit dit en passant: Le plugin DedupePlugin a été retiré de Webpack. Vous devriez le supprimer de votre configuration.

mise à jour:

En plus de ma réponse précédente:

si vous voulez cacher votre code pour la publication, essayez enclosejs.com . Il vous permet de:

• faire une version de votre application, sans sources
• créer une archive auto-extractible ou un installateur
• Make a closed source GUI application
• mettez vos actifs à l'intérieur de l'exécutable

vous pouvez l'installer avec npm install -g enclose