Webpack建立在生產環境上

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配置中，使用definePlugin將process.env.NODE_ENV設置為生產（您也可以使用其他env變量）。

現在，在編譯和縮小過程中，將在您的供應商庫或您的應用程序js中使用NODE_ENV。

'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'

};