Webpackでプロダクションコードを作成する方法と使用方法

私はwebpackに非常に慣れていません。本番ビルドでは、コード全体のサイズを削減できることがわかりました。現在、webpackは約8MBのファイルをビルドし、main.jsは約5MBをビルドします。プロダクションビルドでコードのサイズを減らす方法は？インターネットからサンプルのwebpack構成ファイルを見つけ、アプリケーション用に構成し、実行npm run buildしてビルドを開始し、./dist/ディレクトリにいくつかのファイルを生成しました。

1. それでもこれらのファイルは重い（開発バージョンと同じ）
2. これらのファイルを使用するには？現在、私はwebpack-dev-serverを使用してアプリケーションを実行しています。

package.jsonファイル

{
  "name": "MyAPP",
  "version": "0.1.0",
  "description": "",
  "main": "src/server/server.js",
  "repository": {
    "type": "git",
    "url": ""
  },
  "keywords": [
  ],
  "author": "Iam",
  "license": "MIT",
  "homepage": "http://example.com",
  "scripts": {
    "test": "",
    "start": "babel-node src/server/bin/server",
    "build": "rimraf dist && NODE_ENV=production webpack --config ./webpack.production.config.js --progress --profile --colors"
  },
  "dependencies": {
    "scripts" : "", ...
  },
  "devDependencies": {
    "scripts" : "", ...
  }
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, public_dir , 'main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [
    plugins
  ],
  module: {
    loaders: [loaders]
  }
};

webpack.production.config.js

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "src/frontend";
var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
console.log(path.join(__dirname, 'src/frontend' , 'index.html'));

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-hot-middleware/client?reload=true',
    path.join(__dirname, 'src/frontend' , 'main.js')
  ],
  output: {
    path: path.join(__dirname, '/dist/'),
    filename: '[name].js',
    publicPath: '/'
  },
  plugins: [plugins],
  resolve: {
    root: [path.resolve('./src/frontend/utils'), path.resolve('./src/frontend')],
    extensions: ['', '.js', '.css']
  },

  module: {
    loaders: [loaders]
  }
};

@Vikramadityaの提案に従ってプラグインを追加できます。次に、製品ビルドを生成します。コマンドを実行する必要があります

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

-p生産ビルドを生成するWebPACKの伝えます。本番フラグを含めるには、package.jsonのビルドスクリプトを変更する必要があります。

この質問に対する多くの視聴者を観察した後、VikramadityaとSandeepからの回答を締めくくることにしました。

量産コードをビルドするには、最初に作成する必要があるのは、次のような最適化パッケージを使用した量産構成です。

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

次に、package.jsonファイルで、このプロダクション構成でビルド手順を構成できます

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

ここで、ビルドを開始するために次のコマンドを実行する必要があります

npm run build

私の本番ビルド構成のとおり、webpackはソースを./distディレクトリにビルドします。

これで、UIコードが./dist/ディレクトリで使用可能になります。これらのファイルを静的アセットとして提供するようにサーバーを構成します。できた！

これらのプラグインを使用して、プロダクションビルドを最適化します。

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

私は最近 、サイズを減らすために出力バンドルをgzip 圧縮するcompression-webpack-pluginについて知りました。これを上記のプラグインリストに追加して、製品コードをさらに最適化します。

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

サーバー側の動的gzip圧縮は、CPU使用率が高いため、静的なクライアント側ファイルの提供にはお勧めできません。

自分でこれを学ぶだけです。2番目の質問に答えます。

2. これらのファイルを使用するには？現在、私はwebpack-dev-serverを使用してアプリケーションを実行しています。

webpack-dev-serverを使用する代わりに、「エクスプレス」を実行できます。npm install "express"を使用して、プロジェクトのルートディレクトリに次のようなserver.jsを作成します。

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

次に、package.jsonにスクリプトを追加します。

"start": "node server.js"

最後に、アプリを実行npm run startします：サーバーを起動します

詳細な例は 、https：//alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/で確認でき ます（サンプルコードは最新のパッケージと互換性がありませんが、動作します小さな調整を含む）

あなたは使用することができますARGV（実行してインストールNPMモジュールのargv --saveをインストールNPMあなたwebpack.config.jsファイル内のparamsを取得するため）および生産のためとして使用する-pフラグ「のWebPACK -p」：「ビルド」を、あなたができます以下のようにwebpack.config.jsファイルに条件を追加します

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

以上です。

これはあなたを助けます。

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$/]), ///programming/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
    })
  ],

ギルソンPJ回答に加えて：

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

と

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

それはそれがあなたのコードを二度醜くしようとすることを引き起こす。見る https：//webpack.github.io/docs/cli.html#production-shortcut-pをください。

これを修正するには、plugins-arrayからUglifyJsPluginを削除するか、OccurrenceOrderPluginを追加して「-p」フラグを削除します。だから一つの可能​​な解決策は

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

そして

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

webpack.dev.configとwebpack.prod.configに重複したコードがたくさんある場合は、ブール値isProdを使用して、特定の状況でのみ特定の機能をアクティブにし、webpack.config.jsファイルを1つだけ持つことができます。

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

ちなみに、DedupePluginプラグインはWebpackから削除されました。構成から削除する必要があります。

更新：

私の以前の答えに加えて：

リリース用にコードを非表示にする場合は、enclosejs.comを試してください。次のことができます。

• ソースなしでアプリケーションのリリースバージョンを作成する
• 自己解凍アーカイブまたはインストーラーを作成する
• クローズドソースのGUIアプリケーションを作成する
• アセットを実行可能ファイルに入れます

あなたはそれをインストールすることができます npm install -g enclose