Làm thế nào để đóng gói để 'sản xuất' trang web phản ứng của tôi với Webpack?

Question

Tôi đã quản lý tập lệnh cấu hình react-hot-boilerplate này để tạo và thử nghiệm một ứng dụng web React Flux đơn giản.

Bây giờ tôi có một trang web tôi thích khi chạy npm start, cách nào dễ nhất/tốt nhất để thêm bản dựng sản phẩm vào cấu hình? Khi tôi sử dụng lệnh 'gói' đó, tôi muốn có một thư mục prod nhỏ với tất cả các tệp html cuối cùng và tệp js được rút gọn mà tôi cần trong đó, đó là những gì tôi nên mong đợi?

Đây là tôi 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" 
    } 
} 

Tôi nghĩ rằng tôi muốn thêm một kịch bản mới trong danh sách các kịch bản để tôi có thể sử dụng một npm xyz lệnh mới, nhưng tôi không chắc chắn những gì để viết có .

---

Ngoài ra tôi Webpack.config.js, trong trường hợp tôi có thể phải sử dụng một bản sao tương tự nhưng khác biệt cho cấu hình sản (?):

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

Và tôi không chắc chắn các bộ phận cần giữ, thay đổi (cấu hình prod) hoặc thêm nếu bản sao được yêu cầu ...

Answer 1

Bạn sẽ muốn chạy xây dựng Webpack với tùy chọn --optimize-minimize (giảm thiểu) và đảm bảo rằng NODE_ENV được đặt thành production (này effe ctively vô hiệu hóa/dải ra Phản ứng phát triển chỉ mã của ví dụ như các loại prop kiểm tra)

Bạn có thể thực hiện điều này như là một lệnh NPM bằng cách thêm một build:production (bạn có thể đặt tên này bất cứ điều gì bạn thích) lệnh để bạn package.json như NODE_ENV=production webpack --optimize-minimize

Thêm phần này vào của package.json bạn scripts

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

Và hãy chạy lệnh qua npm run build:production

Lưu ý: điều này giả định rằng bạn đã định cấu hình đúng Webpack và có thể "xây dựng" bằng cách chạy webpack từ dòng lệnh

Bạn có thể phải xem webpack.config của mình. Tôi khuyên bạn nên biết Webpack bên ngoài bản mẫu này. Egghead.io có một số video ngắn tuyệt vời về chủ đề này (và nhiều video khác) :) egghead.io/search?q=Webpack và cụ thể là https://egghead.io/lessons/javascript-intro-to-webpack