这里有两件事你需要为生产发布做准备。

1. 配置你的 package.json 里的脚本
2. 创建一个生产的配置

创建脚本

我们已经使用过 package.json 来创建 npm run dev 的脚本，现在让我们设置 npm run deploy。

{
  "name": "my-project",
  "version": "0.0.0",
  "description": "My awesome project!",
  "main": "app/main.js",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
    "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^1.4.13",
    "webpack-dev-server": "^1.6.6"
  },
  "dependencies": {}
}

正如你所见，我们只是用生产参数运行 Webpack 来指向另一个配置文件。我们也使用了环境变量 “production” 来让我们的模块自动去优化。让我们开始来创建配置文件。

创建生产配置

可以看到，其实生产环境的配置和开发的配置没有太大的不同，主要的不同是指向了一个不同的输出路径，然后也没有了 workflow 的配置和优化，可以看到新加入到配置里的是处理缓存的配置。

var path = require('path');
var node_modules_dir = path.resolve(__dirname, 'node_modules');

var config = {
  entry: path.resolve(__dirname, 'app/main.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  module: {
    loaders: [{
      test: /\.js$/,
      // 这里再也不需通过任何第三方来加载
      exclude: [node_modules_dir],
      loader: 'babel'
    }]
  }
};

module.exports = config;

发布

在项目根目录处运行 npm run deploy，Webpack 现在会运行生产模式，他会自动做一些优化，不过，React Js 也会做自己的优化。可以深入了解缓存处理来做更多的生产配置。