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

Question

我无权访问构建服务器，我只能修改文件。所以我不能在 grunt 命令中添加任何标志。构建服务器似乎只是简单地运行"咕噜咕噜"。我已经尝试了各种配置但没有成功，在这里和其他来源建议。

根据我的理解，webpack 应该默认构建一个生产版本，但也许它只在更高版本的 webpack 中引入，或者不受 grunt-webpack 的支持？

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