Question

为了删除react应用程序的文件大小，我不得不使用Webpack中的UglifyJsPlugin，它从1.5MB下降到~450KB，这对于我创建但可用的小应用程序来说仍然很多。

问题在于它现在显示错误，因为它表示我正在尝试使用ReactJS的开发版本，而是我应该使用生产版本，但没有任何作用。我在网上搜索和搜索，尝试了很多不同的解决方案，没有删除以下错误：

这是我的代码：

gulp.task('js', function() {
  return gulp.src(['./source/components/index.js'])
    .pipe(gulpWebpack({
      output: {
        filename: "./index.js",
      },
      module: {
        loaders: [
          {
            test: /\.js$/,
            include: __dirname + "/source",
            exclude: /(node_modules|bower_components|dist)/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015', 'react']
            }
          },
          {
            test: /\.scss$/,
            loaders: [
              'style-loader',
              'css-loader?modules&importLoaders=1',
              'autoprefixer-loader?{browsers:["> 1%"]}',
              'sass-loader'
            ]
          },
          {
            test: /\.(png|jpg|gif|svg|eot|woff2?|ttf|otf|svg)$/,
            loader: "url-loader"//?limit=10000
          },
          {
            test: /\.html$/,
            loader: "html-loader"
          }
        ]
      },
      plugins: process.env.NODE_ENV === 'production' ? [
        new webpack.DefinePlugin({
          'process.env': {
            // This has effect on the react lib size
            NODE_ENV: JSON.stringify('production')
          }
        }),
        new webpack.optimize.UglifyJsPlugin()
      ] : []
    }))
    .pipe(gulp.dest('./dist/scripts'));
});

我尝试了一些我在网上发现的想法，比如别名（通过改变'反应'到'〜反应'等等，但是得到更多错误并且它不能解决原始错误。）

gulp.task('js', function() {
  return gulp.src(['./source/components/index.js'])
    .pipe(gulpWebpack({
      output: {
        filename: "./index.js",
      },
      resolve: {
        alias: process.env.NODE_ENV === 'production' ? {
          "~react": path.join(__dirname, './node_modules/react/dist/react.min.js'),
          "~react-dom": path.join(__dirname, './node_modules/react-dom/dist/react-dom.min.js')
        } : {
          "~react": path.join(__dirname, './node_modules/react/react.js'),
          "~react-dom": path.join(__dirname, './node_modules/react-dom/index.js')
        }
      },
      module: {
        noParse: [
          path.resolve(__dirname, './node_modules/react/dist/react.min.js'),
          path.join(__dirname, './node_modules/react-dom/dist/react-dom.min.js')
        ],
        loaders: [
          {
            test: /\.js$/,
            include: __dirname + "/source",
            exclude: /(node_modules|bower_components|dist)/,
            loader: 'babel-loader',
            query: {
              presets: ['es2015', 'react']
            }
          },
          {
            test: /\.scss$/,
            loaders: [
              'style-loader',
              'css-loader?modules&importLoaders=1',
              'autoprefixer-loader?{browsers:["> 1%"]}',
              'sass-loader'
            ]
          },
          {
            test: /\.(png|jpg|gif|svg|eot|woff2?|ttf|otf|svg)$/,
            loader: "url-loader"//?limit=10000
          },
          {
            test: /\.html$/,
            loader: "html-loader"
          }
        ]
      },
      plugins: process.env.NODE_ENV === 'production' ? [
        new webpack.DefinePlugin({
          'process.env': {
            // This has effect on the react lib size
            NODE_ENV: JSON.stringify('production')
          }
        }),
        new webpack.optimize.UglifyJsPlugin()
      ] : []
    }))
    .pipe(gulp.dest('./dist/scripts'));
});

但后来我收到了这个错误：

如果我没有Uglify，一切都很好，但是文件大小太大，应用程序需要加载一堆，这对网站来说很糟糕。

使用Webpack生成ENV时，ReactJS显示错误

0 个答案: