的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建立在生产环境

回答

相关问题