web-dev-qa-db-ja.com

本番用コードの作成方法と使用方法のWebpack

私はWebPackを初めて使用していますが、プロダクションビルドではコード全体のサイズを縮小できることがわかりました。現在、webpackはおよそ8MBのファイルとmain.jsをおよそ5MBで構築しています。プロダクションビルドでコードのサイズを縮小する方法私はインターネットからサンプルのwebpack configurtionファイルを見つけ、私は自分のアプリケーション用に設定し、そして私は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]
  }
};
node.jsreactjsnpmwebpackwebpack-dev-server
78
Gilson PJ

この質問に対する視聴者数を観察した後、私は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/ディレクトリにあります。これらのファイルを静的資産として機能するようにサーバーを構成します。完了しました。

34
Gilson PJ

@Vikramadityaの提案に従ってプラグインを追加できます。それからプロダクションビルドを生成します。あなたはコマンドを実行する必要があります

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

-pはwebpackにプロダクションビルドを生成するように伝えます。プロダクションフラグを含めるには、package.jsonのビルドスクリプトを変更する必要があります。

55
sandeep

プロダクションビルドを最適化するためにこれらのプラグインを使用してください。

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

私は最近compression-webpack-pluginについて知るようになりました。 。プロダクションコードをさらに最適化するために、上記のプラグインリストにもこれを追加してください。

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

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

39
Vikramaditya

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

  1. これらのファイルの使い方現在私はwebpack-dev-serverを使ってアプリケーションを実行しています。

Webpack-dev-serverを使う代わりに、単に "express"を実行することができます。 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"

最後に、app：npm run startを実行してサーバーを起動します。

詳細な例は、 https://alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/ （サンプルコードは最新のパッケージとは互換性がありませんが、少し手を加えても動作します）

12
Siyuan Jiang

パラメータを取得するには、 argv npmモジュール（npm install argv --saveを実行してインストールします）を使用できます。あなたのwebpack.config.jsファイルとプロダクションは - pフラグを使ってください： "webpack -p"、条件を追加することができます以下のようにwebpack.config.jsファイルに

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

以上です。

8
Hayk Aghabekyan

これはあなたを助けるでしょう。

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
    })
  ],
6
Khalid Azam

Gilson 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"フラグを削除します。 1つの可能な解決策はそうなるでしょう

 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"
},
4
Putzi San

Webpack.dev.configとwebpack.prod.configに重複するコードが多数ある場合は、ブール値のisProdを使用して特定の状況下でのみ特定の機能を有効にし、単一のwebpack.config.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
    }));
  }

ところで：DedupePluginプラグインはWebpackから削除されました。あなたはそれをあなたの設定から削除するべきです。

アップデート：

私の前の答えに加えて：

自分のコードを公開しないようにしたい場合は、 enclosejs.com を試してください。それはあなたがすることができます：

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

npm install -g encloseでインストールできます

2
MatthiasSommer