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

95

Я очень новичок в webpack, я обнаружил, что в производственной сборке мы можем уменьшить размер общего кода. В настоящее время webpack собирает около 8 МБ файлов, а main.js - около 5 МБ. Как уменьшить размер кода в производственной сборке? Я нашел образец файла конфигурации веб-пакета из Интернета, я настроил свое приложение, запустил 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.js  reactjs  npm  webpack  webpack-dev-server 
— Гилсон П.Дж.
источник
1
Вы нашли ответ на свой последний вопрос? «Как использовать эти файлы? В настоящее время я использую webpack-dev-server для запуска приложения».
— Рэнди
4
Интернет был намного лучше до появления webpack, просто посмотрите на этот вопрос и ответ.
— Randy L

Ответы:

66

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

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

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

— Sandeep
источник
7
хорошо, спасибо. мое следующее сомнение - как запустить производственный код? когда я запускаю указанную выше команду, она создает несколько файлов в каталоге dist. хорошо, он успешно скомпилирован. как теперь использовать эти файлы? в режиме разработки я использовал "npm start", и он запустился.
— Gilson PJ
Если вы перейдете в свой src/server/bin/server. Затем вы сможете выяснить, как он обслуживает файлы, и, возможно, изменить это. Я думаю, он будет запускать webpack для создания файлов и их обслуживания. Взгляните на код этого файла.
— sandeep
@Vikramaditya Не могли бы вы помочь мне со сценарием в stackoverflow.com/questions/40993795/msbuild-and-webpack
— lohiarahul 06
@GilsonPJ ты понял, как использовать эти файлы пользовательского интерфейса?
— Рэнди
Сначала вам нужно установить веб-пакет,npm install webpack
— Питер Рейдер,
43

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

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

  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каталоге.

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

— Гилсон П.Дж.
источник
7
Что вы имеете в виду в своем последнем предложении? Как поставить эти коды? Я знаю, что node.js создает сервер сам по себе. Но как я могу запустить его после того, как файл будет в ./dist/каталоге?
— newguy
6
Просто примечание: добавление опции -p поверх плагина uglifyJS вызывает проблемы, так как он дважды пытается углифицировать. Удаление опции -p
— cli устранило
«NODE_ENV» не распознается как внутренняя или внешняя команда, работающая программа или командный файл.
— Антон Дузенко
2
Это должен быть принятый ответ, потому что никто не говорил, как обслуживать веб-сайт. Теперь ваш код пользовательского интерфейса будет доступен в каталоге ./dist/. Настройте свой сервер для предоставления этого кода пользовательского интерфейса для запроса. и все готово.!
— jperelli
2
Я до сих пор не понимаю, как «настроить сервер на предоставление этого кода пользовательского интерфейса для запроса. И все готово». Я понимаю, что мы хотим здесь сделать, но я просто не знаю, как это сделать
— Рэнди
42

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

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

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

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

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

— Викрамадитья
источник
1
что делает часть common.js в commonschuckplugin? мне легче всего понять этот плагин.
— Эчибан
2
CommonsChunkPlugin извлекает общий код из всех ваших фрагментов и помещает его в отдельный файл common.js.
— Викрамадитья,
3
Этот ответ больше недействителен для версии 4 веб-пакета
— Деннис
20

Просто учусь этому сам. Отвечу на второй вопрос:

  1. Как использовать эти файлы? В настоящее время я использую 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/ (код примера несовместим с последними пакетами, но он будет работать с небольшими поправками)

— Сиюань Цзян
источник
2
Если вы начали изучать nodejs, expressjs и т. Д., То я хочу вам рассказать. Это вопрос продвинутого уровня. Дело не только в том, как запускать эти файлы. Это о том, как минимизировать (сжать) производственный код и как запустить этот сжатый код
— Arpit
1
@Arpit Спасибо, что указали на это. Я новичок в этом. Я предположил, что после создания сжатого кода метод выполнения должен быть таким же.
— Сиюань Цзян
9

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

Вот и все.

— Айк Агабекян
источник
1
Вместо этого используйтеprocess.argv.indexOf('-p') != -1
— AjaxLeung
@AjaxLeung: вы должны включить argvв файл конфигурации WebPack:const argv = require('argv');
— Kadam
6

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

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
    })
  ],
— Халид Азам
источник
5

Помимо ответа 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 из массива плагинов или добавив 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"
},
— Putzi San
источник
3

Если у вас много повторяющегося кода в файлах 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

— Матиас Соммер
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.