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

Ответ 1

После наблюдения числа зрителей на этот вопрос я решил завершить ответ от Викрамадитья и Сандипа.

Чтобы создать производственный код, первое, что вам нужно создать, - это конфигурация производства с пакетами оптимизации, такими как

  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 -p --config ./webpack.production.config.js"
},

теперь вам нужно запустить следующую команду для запуска сборки

npm run build

В соответствии с моей конфигурацией сборки сборки webpack построит источник в каталоге ./dist.

Теперь ваш код пользовательского интерфейса будет доступен в каталоге ./dist/. Установите ваш сервер для подачи этого кода пользовательского интерфейса для запроса. и вы закончили.!

Ответ 2

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

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

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

Ответ 3

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

  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 на стороне сервера не рекомендуется для обслуживания статических клиентских файлов из-за большого использования ЦП.

Ответ 4

Вы можете использовать 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')
        }
    })
]

И вот оно.

Ответ 5

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

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

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

Ответ 7

Если в вашем 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