Как упаковать в "производство" мой веб-сайт реакции с помощью Webpack?

Question

Мне удалось использовать этот конфигурационный сценарий реагировать, чтобы создать и протестировать простое веб-приложение React Flux.

Теперь у меня есть веб-сайт, который мне нравится, когда я запускаю npm start Какой самый простой / лучший способ добавить производственную сборку в конфигурацию? Когда я использую эту команду "package", я бы хотел получить немного prod Папка со всеми окончательными HTML и минимизированными js-файлами, которые мне нужны, это то, что я должен ожидать?

Это мой package.json:

{
  "name": "react-hot-boilerplate",
  "version": "1.0.0",
  "description": "Boilerplate for ReactJS project with hot code reloading",
  "scripts": {
    "start": "node server.js",
    "lint": "eslint src"
  },
  "author": "Dan Abramov <[e-mail]> (http://github.com/gaearon)",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/gaearon/react-hot-boilerplate/issues"
  },
  "homepage": "https://github.com/gaearon/react-hot-boilerplate",
  "devDependencies": {
    "babel-core": "^5.4.7",
    "babel-eslint": "^3.1.9",
    "babel-loader": "^5.1.2",
    "eslint-plugin-react": "^2.3.0",
    "react-hot-loader": "^1.2.7",
    "webpack": "^1.9.6",
    "webpack-dev-server": "^1.8.2"
  },
  "dependencies": {
    "react": "^0.13.0",
    "flux": "^2.0.2",
    "events": "^1.0.2",
    "object-assign": "^3.0.0",
    "jquery": "^2.1.4",
    "imports-loader": "^0.6.4",
    "url-loader": "^0.5.6",
    "numeral": "^1.5.3",
    "bootstrap": "^3.3.5",
    "d3": "^3.5.6",
    "zeroclipboard": "^2.2.0",
    "react-toastr": "^1.5.1",
    "d3-legend": "^1.0.0"
  }
}

Я думаю, что хочу добавить новый скрипт в список скриптов, чтобы я мог использовать новый npm xyz команда, но я не уверен, что там писать.

---

Также мой Webpack.config.js, на случай, если мне (?) Придется использовать похожую, но отличную копию для конфигурации prod:

  var path = require('path');
  var webpack = require('webpack');

  module.exports = {
    devtool: 'eval',
    entry: [
      'webpack-dev-server/client?http://localhost:3000',
      'webpack/hot/only-dev-server',
      './src/index'
    ],
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/static/'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin(),
      new webpack.NoErrorsPlugin(),
      new webpack.ProvidePlugin({ $: "jquery", jQuery: "jquery" })
    ],
    externales: { "jquery": "jQuery", "$": 'jQuery' },
    resolve: {
      extensions: ['', '.js', '.jsx']
    },
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          loaders: ['react-hot', 'babel'],
          include: path.join(__dirname, 'src')
        },
        { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
        { test: /\.css$/, loader: 'style-loader!css-loader' },
        {test: /\.(png|jpg|gif)$/, loader: 'url-loader?limit=8192'} // inline base64 URLs for <=8k images, direct URLs for the rest
      ]
    }
  };

И я не уверен, какие части оставить, изменить (prod config) или добавить, если требуется копия...

Answer 1

Вы захотите запустить свою сборку Webpack с --optimize-minimize вариант (минимизирует) и убедитесь, что NODE_ENV установлен в production (это эффективно отключает / удаляет только код разработки React, такой как проверка типов пропов)

Вы можете выполнить это как команду npm, добавив build:production (вы можете назвать это как угодно) package.json такие как NODE_ENV=production webpack --optimize-minimize

Добавьте это к вашему package.json's scripts

"build:production": "NODE_ENV=production webpack --optimize-minimize"

И запустите команду через npm run build:production

Примечание: это предполагает, что вы уже правильно настроили Webpack и можете "собрать", запустив webpack из командной строки

Возможно, вам придется взглянуть на ваш webpack.config, я предлагаю познакомиться с Webpack за пределами этого шаблона. В Egghead.io есть несколько отличных коротких видео по этой теме (и многих других):) egghead.io/search?q=Webpack и, в частности, https://egghead.io/lessons/javascript-intro-to-webpack