Question

我正在使用webpack和babel进行JSX和缩小生产构建.Config看起来像这样

var webpack = require('webpack');

var fileNames = [
   'module1',
  //'module2', 
];

function giveMeConfig(filename) {
  return {
       entry: './app/pages/' + filename + '.js'
       ,
       output: {
           filename: './public/' + filename + '.js'
       },
       module: {
           plugins: [
              new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify('production')
              }),
              new webpack.optimize.UglifyJsPlugin(),
              new webpack.optimize.OccurenceOrderPlugin()
           ],
           loaders: [
               {
                   test: /(\.jsx|\.js)$/,
                   exclude: /(node_modules|bower_components)/,
                   noParse: /node_modules\\json-schema\\lib\\validate\.js/,
                   loader: 'babel',
                   query: {
                       presets: ['react'],
                       compact: false
                   }
               }
               ,
               {
                   test: /\.json$/, loader: 'json-loader'
               }
           ]
       },
       node: {
           console: false,
           fs: 'empty',
           net: 'empty',
           tls: 'empty'
       }

   }
}

var configAr = [];

for (var i = 0; i < fileNames.length; i++) {
  configAr.push(giveMeConfig(fileNames[i]));
}

module.exports = configAr;

除了我在使用生成webpack -p构建之后，我正在使用dev开发生成的反应开发工具上看到的所有工作。知道我在这里做错了什么？我是webpack的新手，并且在没有运气的情况下应用优化方法给出了他们的文档。在此先感谢：）

Answer 1

使用wepack -p相当于webpack --optimize-minimize --define process.env.NODE_ENV="'production'" 它将优化和缩小您的代码，因此您不需要将Uglify或其他插件显式添加到您的webpack配置文件中。当您想为开发和生产使用相同的配置脚本时，它非常有用。

因此，您不需要任何插件来定义您的环境变量，也不需要缩小代码。设置plugins: []可以解决您的问题。所以你的package.json将如下所示： "build:dev": "webpack", "build:prod": "webpack -p"

此外，如果您对webpack不太自信，我强烈建议您使用create-react-app工具启动您的应用程序。

Answer 2

我当前的webpack配置文件没有给出上述错误。

var path = require('path');
var webpack = require('webpack');
var package=require('./package.json');
var config = require('./config');
var ManifestPlugin = require('webpack-manifest-plugin');


const ExtractTextPlugin = require('extract-text-webpack-plugin');
var getPlugins = function(){
  var pluginsList = [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: Infinity,
      filename: 'vendor.bundle_[hash].js'
    }),

    // new webpack.DefinePlugin({
    //   'process.env': { NODE_ENV: JSON.stringify(config.env) }
    // }),
    new webpack.DefinePlugin({
      "process.env": {
         NODE_ENV: JSON.stringify("production")
       }
    }),
    new webpack.NamedModulesPlugin(),
    new ManifestPlugin({
      fileName: 'build-manifest.json'
    })
  ];
  if(config.envConfig.IS_PRODUCTION ){
    pluginsList.push(new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false
    }));
    pluginsList.push(new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      output: {
        comments: false
      },
      sourceMap: false,
      minimize: true
    }));
  }
  return pluginsList;
}



module.exports = {
  cache: true,
  output: {
    path:path.join(__dirname, "dist/js"),
    filename: "[name]_[hash].js",
    chunkFilename:"[name]_[hash].js",
    publicPath:config.envConfig.JS_ASSETS_PATH
  },
  devServer: {
    contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 8080
  },

  entry: {
    index: [
      package.paths.app
    ],
    vendor: [
      'react', 'react-dom','phrontend',
      'react-ga'
    ]
  },
  plugins: getPlugins(),
  target: 'web',

  module: {
    rules: [
      {
        test: /.jsx?$/,
        exclude: /node_modules/,
        use: [{
          loader: 'babel-loader',
        }]
      }
    ]
  },
};

以下是webpack的gulp任务。我正在使用gulp来自动执行任务，但您只需使用webpack命令。

var gulp = require('gulp');
var exec = require('child_process').exec;
var webpack = require('webpack');
var browserSync = require('browser-sync');
var reload = browserSync.reload;
var del = require('del');
var runSequence = require('run-sequence');

gulp.task('webpack:watch', function() {
  gulp.watch(GLOBAL.config.src+'/**/*.{js,jsx}', ['webpack',reload]);
});
gulp.task('webpack:clean', function(cb) {
  del([GLOBAL.config.dest + '/js/*.js*'], {dot: true})
  .then(function() {
    cb();
  });
});



gulp.task('webpack', function(cb) {
  runSequence(
    'webpack:execute',
    'replace-scripts-source',
    cb);
  });

  gulp.task('webpack:execute', ['webpack:clean'], function(cb) {
    exec('webpack'+ " --env=" + GLOBAL.config.env , function (err, stdout, stderr) {
      console.log(stdout);
      console.log(stderr);
      cb(err);
    }).stdout.on('data',function(data){console.log(data)});
  });

Webpack没有给出反应生成构建

2 个答案: