Как упаковать в «производство» мой веб-сайт с Webpack?

Question

Мне удалось использовать этот скрипт конфигурации react-hot-boilerplate для создания и тестирования простого веб-приложения 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 <dan.abramov@me.com> (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, в случае, если я, возможно, придется использовать аналогичную, но отчетливую копию для прод конфигурации (?):

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 
     ] 
    } 
    }; 

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

Answer 1

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

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

Добавьте к этому ваш package.json-х 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