Question

我无权访问构建服务器，只能修改文件。所以我不能在grunt命令中添加任何标志。构建服务器似乎只是在运行“ grunt”。我尝试了各种配置，但均未成功，请参见此处和其他资料。

据我所知，webpack默认情况下应该构建生产版本，但是也许它仅在更高版本的webpack中引入或不受grunt-webpack支持？

Gruntfile.js

const path = require('path');

const BUILD_DIR = path.resolve(__dirname, 'build/');
const APP_DIR = path.resolve(__dirname, 'src/');

module.exports = function config(grunt) {
  grunt.option("p"); // attempt to force a -p flag on webpack, doesn't work

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    webpack: {
      reactcatalog: {
        entry: ['core-js/fn/promise', 'core-js/fn/map', 'formdata-polyfill', 'whatwg-fetch', `${APP_DIR}/index.js`],
        output: {
          path: BUILD_DIR,
          filename: 'react-catalog.js',
        },
        resolve: {
          extensions: ['.js', '.jsx'],
        },
        module: {
          loaders: [{
            test: /\.jsx?$/,
            include: APP_DIR,
            loader: ['babel-loader', 'eslint-loader'],
          },
          {
            test: /\.css$/,
            include: APP_DIR,
            loader: 'style-loader!css-loader',
          },
          {
            test: /\.scss$/,
            include: APP_DIR,
            loaders: ['style-loader', 'css-loader', 'sass-loader'],
          },
          {
            test: /\.svg$/,
            loader: 'babel-loader!react-svg-loader',
          }],
        },
        stats: {
          colors: true,
        },
        progress: false,
        failOnError: false,
      },
    },
  });
  grunt.loadNpmTasks('grunt-webpack');
  grunt.registerTask('default', ['webpack']);
};

package.json：

{
  "name": "react-catalog",
  "version": "0.1.0",
  "description": "ES based React catalog",
  "private": true,
  "dependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-proto-to-assign": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-es2017-node7": "^0.5.2",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "breakpoint-sass": "^2.7.1",
    "core-js": "^2.5.5",
    "css-loader": "^1.0.0",
    "formdata-polyfill": "^3.0.10",
    "grunt-webpack": "^3.1.1",
    "loaders.css": "^0.1.2",
    "node-sass": "^4.9.3",
    "npm-install": "0.0.1",
    "prop-types": "^15.6.1",
    "react": "^16.3.0",
    "react-device-detect": "^1.3.4",
    "react-dom": "^16.3.0",
    "react-image-gallery": "^0.8.8",
    "react-image-lightbox": "^4.6.0",
    "react-infinite-scroller": "^1.1.4",
    "react-intl-universal": "^1.10.1",
    "react-md-spinner": "^0.2.5",
    "react-move": "^2.6.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scroll": "^1.7.9",
    "react-skylight": "^0.5.1",
    "react-spinners": "^0.2.5",
    "react-svg": "^2.2.18",
    "react-svg-loader": "^2.1.0",
    "react-svg-spinner": "^0.2.0",
    "react-tabs": "^2.2.2",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0",
    "run": "^1.4.0",
    "sass-loader": "^7.0.1",
    "sassimple": "^1.3.8",
    "style-loader": "^0.20.3",
    "susy": "^3.0.5",
    "webpack": "^3.11.0",
    "whatwg-fetch": "^2.0.4"
  },
  "devDependencies": {
    "babel-eslint": "8.0.1",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-flowtype": "^2.49.3",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.8.2",
    "webpack-livereload-plugin": "^1.2.0"
  },
  "scripts": {
    "webpack": "webpack", // does not help to add a -p flag here as it doesn't seem to use this
    "webpack:watch": "webpack --watch"
  }
}

我尝试了各种尝试，但都没有成功。

    plugins: [
      new webpack.DefinePlugin({
        process: {
          env: {
            NODE_ENV: 'production'
          }
        }
      })
    ]

成为：

https://user-images.githubusercontent.com/893783/44646081-34498c00-a9da-11e8-8bd1-66c70b8ba9f5.png

Answer 1

最后我自己想出了解决方案！

const path = require('path');
++ const webpack = require('webpack');
const BUILD_DIR = path.resolve(__dirname, 'build/');
const APP_DIR = path.resolve(__dirname, 'src/');

module.exports = function config(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    webpack: {
      reactcatalog: {
        // ...
        plugins: [
          new webpack.DefinePlugin({
            process: {
              env: {
                NODE_ENV: '"production"'
              }
            }
          }),
          new webpack.optimize.UglifyJsPlugin()
        ]
      },
    },
  });
};

Grunt-webpack：如何在没有构建服务器访问的情况下强制生产模式？

1 个答案: