webpack.DefinePlugin 无法识别并且 devtool: 'cheap-module-source-map 不工作

Question

我正在尝试按照这篇文章 http://moduscreate.com/optimizing-react-es6-webpack-production-build/ 来减小用于生产的 React 项目的大小。不幸的是，某些步骤不起作用。其中之一就是webpack.DefinePlugin，在webpack中输出webpack.DefinePlugin cannot be defined的错误。也许，这是因为我在开发中构建项目，现在我想将其移至生产环境。也许，我最初必须在生产中创建项目？或者有人知道减少项目大小的更好方法吗？

webpack.config.js

var path = require("path");
var webpack = require('webpack');

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    devtool: 'cheap-module-source-map',
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        })
    ],
    module: {
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",

                query: {
                    presets: ["react", "es2015", "stage-2"]
                }
            }
        ]
    }


};

module.exports = config;

此外，devtool: 'cheap-module-source-map' 不工作，它根本没有减少项目的大小。

Answer 1

尝试

...

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

...

相反。

此外，devtool: 'cheap-module-source-map' 不是为了减小包的大小，而是为了生成 source maps。

webpack.DefinePlugin 无法识别并且 devtool: 'cheap-module-source-map 不工作

webpack.DefinePlugin is not recognized and devtool: 'cheap-module-source-map does not work

reactjs

webpack

webpack-plugin