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

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

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

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

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

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

Я недавно узнал о сжатие-webpack-плагин который 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.конфиг.js файл и как для производства вы используете - p флаг "build": "webpack-p", вы можете добавить условие в webpack.конфиг.JS файл, как показано ниже

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

и все.

просто изучаю это сам. Я отвечу на второй вопрос:

1. как использовать эти файлы? В настоящее время я использую webpack-dev-server для запуска приложения.

вместо использования webpack-dev-server, вы можете просто запустить "экспресс". используйте npm install "express" и создайте сервер.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);

затем в пакет.json, добавьте скрипт:

"start": "node server.js"

наконец, запустите приложение: npm run start для запуска сервера

подробный пример можно увидеть на: https://alejandronapoles.com/2016/03/12/the-simplest-webpack-and-express-setup/ (пример кода не совместим с последними пакетами, но он будет работать с небольшими настройками)

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

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

в дополнение к 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 для получения дополнительной информации.

вы можете исправить это, удалив UglifyJsPlugin из plugins-array или добавить 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.разработка.конфигурация и ваш веб-пакет.подгонять.config, вы можете использовать логическое isProd активировать определенные функции только в определенных ситуациях и имеют только один webpack.конфиг.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