如何打包到'production'我使用 Webpack 的 React 网站? [英] How to package to 'production' my react website with Webpack?

问题描述

我设法使用这个 react-hot-boilerplate 配置脚本来创建和测试一个简单的 React Flux 网络应用.

I managed to use this react-hot-boilerplate configuration script to create and test a simple React Flux webapp.

既然我有一个我喜欢运行 npm start 的网站，那么在配置中添加生产版本的最简单/最好的方法是什么?当我使用那个包"命令时，我想要一个小的 prod 文件夹，其中包含我需要的所有最终 html 和缩小的 js 文件，这是我应该期待的吗?

Now that I have a website I like when I run npm start, what would be the easiest/best way to add a production build in the configuration? When I use that 'package' command I would like to get a little prod folder with all the final html and minified js files that I need in it, is that what I should expect?

这是我的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 命令，但我不确定在那里写什么.

I think I want to add a new script in the scripts list so I can use a new npm xyz command but I am not sure what to write there.

还有我的 Webpack.config.js，以防我(?)不得不为 prod 配置使用类似但不同的副本:

Also my Webpack.config.js, in case I might(?) have to use a similar but distinct copy for the prod config :

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

如果需要副本，我不确定要保留、更改(产品配置)或添加哪些部分...

And I'm not sure which parts to keep, alter (prod config) or add if a copy is required...

推荐答案

您需要使用 --optimize-minimize 选项(缩小)运行您的 Webpack 构建，并确保 NODE_ENV 设置为 production(这有效地禁用/剥离了 React 的开发专用代码，例如 prop 类型检查)

You'll want to run your Webpack build with the --optimize-minimize option (minifies) and make sure that NODE_ENV is set to production (this effectively disables/strips out React's development only code such as prop types checking)

您可以通过将 build:production(您可以随意命名)命令添加到您的 package.json(例如 NODE_ENV=production webpack --optimize-minimize

You can accomplish this as an npm command by adding a build:production (you can name this whatever you like) command to your package.json such as NODE_ENV=production webpack --optimize-minimize

将此添加到您的 package.json 的 scripts

Add this to your 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

You may have to look at your webpack.config I suggest getting to know Webpack outside of this boilerplate. Egghead.io has some great, short videos on the topic (and many others) :) egghead.io/search?q=Webpack and specifically https://egghead.io/lessons/javascript-intro-to-webpack

这篇关于如何打包到'production'我使用 Webpack 的 React 网站?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！