Webpack 基于生产环境构建答案

【问题标题】：Webpack builds on production environmentWebpack 基于生产环境构建
【发布时间】：2018-01-23 00:01:51
【问题描述】：

在像https://github.com/wallacyyy/reactly-starter-kit 这样的 React JS 入门工具包中，我看到 package.json 文件的内容如下：

"scripts": {
   "build": "cross-env NODE_ENV=production webpack --config ./webpack.prod.config.js --progress --colors",
...
},
"dependencies": {
  "express": "^4.15.2",
  "react": "^15.5.4",
  "react-dom": "^15.5.4"
},
"devDependencies": {
  "webpack": "^2.2.1",
  "webpack-dev-server": "^2.4.2"
}

构建脚本使用 webpack 来处理生产构建。当 webpack 只是一个 devDependency 时，它如何能够在生产环境中运行？

【问题讨论】：

它不能在生产环境中运行，它只是传递一个变量NODE_ENV，其值为production，这是将一些配置设置为生产模式（如缩小）所必需的。

标签： node.js reactjs heroku npm webpack

【解决方案1】：

您保留 prod 和 dev webpack 配置。并且在 prod webpack 配置中使用 definePlugin 将 process.env.NODE_ENV 设置为生产环境（您也可以使用其他环境变量）。

现在在转译和缩小期间，NODE_ENV 将在您的供应商库或您的应用程序 js 中使用。

'use strict';

 var webpack = require('webpack');
 var uglifyPlugin = new webpack.optimize.UglifyJsPlugin({
  minimize: true,
  comments: false
 });

 var definePlugin = new webpack.DefinePlugin({
   'process.env': {
    'NODE_ENV': JSON.stringify('production')
  }
 });

 var commonChunkPlugin = new webpack.optimize.CommonsChunkPlugin({
  name: 'vendor',
  chunks: ['vendor', 'source'],
  filename: 'vendor.bundle.js'
 });

module.exports = {
  context: __dirname + '/jsFolder',
  entry: {
    source: ['./app.jsx'],
    vendor: [
        'react',
        'react-dom',
        'redux',
        'axios'
    ]
},

output: {
    filename: "[name].bundle.js"
},

resolve: {
    extensions: ['.js', '.jsx']
},

module: {
    loaders: [
        { test: /\.json$/, loader: 'json-loader' },
        {
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['react', 'es2015', 'stage-0']
            }
        },
        { test: /\.css$/, loader: "css-loader" },
    ]
},

plugins: [commonChunkPlugin, definePlugin, uglifyPlugin],

node: {
    console: true,
    fs: 'empty',
    net: 'empty',
    tls: 'empty'
},

 target: 'web'

};

【讨论】：

【解决方案2】：

Webpack 无法在您的生产环境中运行。您的build 脚本只是将NODE_ENV 变量设置为等于production，从而让Webpack 和他的插件知道他们应该准备捆绑包以供生产使用。运行此命令时究竟会发生什么取决于您的 webpack 配置，但最常见的事情是代码压缩。您还可以指定不同类型的源映射和许多其他内容。请参阅https://webpack.js.org/guides/production/ 了解更多信息。

【讨论】：

谢谢！捆绑包如何转移到生产环境？如果您正在部署到 heroku，源会被推送，但 AFAIK 捆绑包不会被签入到 repo。