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

  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$/,

      // There is not need to run the loader through
      // vendors
      // 这里再也不需通过任何第三方来加载
      exclude: [node_modules_dir],
      loader: 'babel'
    }]
  }
};

module.exports = config;

发布

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