Question

在像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时，它如何能够在生产中运行？

Answer 1

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

Answer 2

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

现在在转换和缩小过程中，NODE_ENV将在您的供应商lib或您的app 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'

};

Webpack建立在生产环境

2 个答案: