Webpack, как создавать производственный код и как его использовать

Вы можете добавить плагины, как предложено @Vikramaditya. Затем сгенерировать сборку. Вы должны запустить команду

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

-p сообщает webpack генерировать производственную сборку. Вы должны изменить конструкцию script в package.json, чтобы включить флаг создания.

Используйте эти плагины для оптимизации вашей сборки:

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

Недавно я узнал о compression-webpack-pluginкоторый gzips ваш выходной пакет, чтобы уменьшить его размер. Добавьте это также в список перечисленных выше плагинов для дальнейшей оптимизации вашего производственного кода.

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

Динамическое сжатие gzip на стороне сервера не рекомендуется для обслуживания статических клиентских файлов из-за большого использования ЦП.

Вы можете использовать argv модуль npm (установите его, запустив npm install argv --save) для получение параметров в файле webpack.config.js, а для производства вы используете флаг -p "build": "webpack -p" , вы можете добавить условие в webpack. config.js, как показано ниже

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

И вот оно.

В дополнение к ответу Гильсона 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.

Вы можете исправить это, удалив UglifyJsPlugin из массива плагинов или добавьте OccurrenceOrderPlugin и удалите "-p" -flag. поэтому одним возможным решением могло бы быть

 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"
},

Это поможет вам.

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

Если в вашем webpack.dev.config и вашем файле webpack.prod.config имеется много дублирующегося кода, вы можете использовать boolean 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. Вы должны удалить его из своей конфигурации.

UPDATE:

В дополнение к моему предыдущему ответу:

Если вы хотите скрыть свой код для выпуска, попробуйте enclosejs.com. Он позволяет:

• сделать версию вашего приложения без источников
• создать самораспаковывающийся архив или установщик
• Сделать закрытое исходное графическое приложение
• Поместите свои активы в исполняемый файл

Вы можете установить его с помощью npm install -g enclose