的WebPack建立在生產環境

在陣營就像一個JS入門套件https://github.com/wallacyyy/reactly-starter-kit，我看到有內容類似這樣的package.json文件：的WebPack建立在生產環境

"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時，它如何能夠在生產環境中運行？

來源

2017-08-15 Jon

它不會在生產環境中運行，它只是傳遞一個變量'NODE_ENV'，其值爲'production'，它需要將某些配置設置爲生產模式（如縮小）。 – Gerardo

Webpack不能在您的生產環境中運行。您的build腳本只是將NODE_ENV變量設置爲等於production，因此讓Webpack及其插件知道他們應該準備捆綁軟件以供生產使用。運行此命令時究竟發生了什麼取決於您的webpack配置，但最常見的情況是代碼縮小。你也可以指定不同類型的源地圖和許多其他的東西。有關更多信息，請參閱https://webpack.js.org/guides/production/。

來源

2017-08-15 04:54:55

謝謝！該軟件包如何轉移到生產環境？如果您正在部署到heroku，則會推送源代碼，但AFAIK捆綁軟件不會檢入回購站。 – Jon

您同時保留prod和dev webpack配置。在prod webpack配置中，使用definePlugin將process.env.NODE_ENV設置爲生產（您也可以使用其他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' 

};

來源

2017-08-15 07:15:31 Moniv

的WebPack建立在生產環境

回答

相關問題