代码之家 › 专栏 › 技术社区 › OZZIE

GruntWebpack:如何在没有构建服务器访问的情况下强制生产模式?

gruntjs webpack reactjs

OZZIE · 技术社区 · 8 年前

我只能修改服务器,不能修改文件。所以我不能在grunt命令中添加任何标志。构建服务器似乎只是运行“grunt”。我尝试过各种配置,但没有成功,这里和其他来源的建议。

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']);
};

包.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

1 回复 | 直到 8 年前

RobC Manuel Gonzalez 8 年前

最后我自己想出了解决办法!

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()
        ]
      },
    },
  });
};