Webpack 2 error: Cannot read property 'plugin' of null

Question

我是 webpack 的新手，所以我正在尝试从头开始创建适合我需要的配置。它对我来说看起来完全没问题但是当我是 运行 webpack-dev-server 命令时我得到了错误：

D:\Dev\agromash.UI>npm run dev

> agromash.ui@0.0.1 dev D:\Dev\agromash.UI
> webpack-dev-server

D:\Dev\agromash.UI\node_modules\webpack-dev-server\bin\webpack-dev-server.js:341
                throw e;
                ^

TypeError: Cannot read property 'plugin' of null
    at NpmInstallPlugin.apply (D:\Dev\agromash.UI\node_modules\npm-install-webpack-plugin\src\plugin.js:50:28)
    at Compiler.apply (D:\Dev\agromash.UI\node_modules\tapable\lib\Tapable.js:306:16)
    at webpack (D:\Dev\agromash.UI\node_modules\webpack\lib\webpack.js:32:19)
    at startDevServer (D:\Dev\agromash.UI\node_modules\webpack-dev-server\bin\webpack-dev-server.js:335:14)
    at processOptions (D:\Dev\agromash.UI\node_modules\webpack-dev-server\bin\webpack-dev-server.js:318:3)
    at Object.<anonymous> (D:\Dev\agromash.UI\node_modules\webpack-dev-server\bin\webpack-dev-server.js:419:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)

这是我的 webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var DashboardPlugin = require('webpack-dashboard/plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
var NpmInstallPlugin = require('npm-install-webpack-plugin');
if (process.env.NODE_ENV === 'production') {
  plugins.push(
    new CleanWebpackPlugin([ 'public/assets/' ], {
      root: __dirname,
      verbose: true,
      dry: false
    })
  );
  plugins.push(new webpack.optimize.DedupePlugin());
  plugins.push(new webpack.optimize.OccurenceOrderPlugin());
}
module.exports = {
    entry: ['babel-polyfill', "./src/index.js"],
    output: {
        path: path.resolve(__dirname, "public"), // string
        filename: "bundle.js",
        publicPath: "/assets/"
    },
    module: {
        rules: [{
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!postcss-loader'
                })
            },
            {
                test: /\.less$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!postcss-loader!less-loader'
                })
            },
            {
                test: /\.gif$/,
                loader: 'url-loader?limit=10000&mimetype=image/gif'
            },
            {
                test: /\.jpg$/,
                loader: 'url-loader?limit=10000&mimetype=image/jpg'
            },
            {
                test: /\.png$/,
                loader: 'url-loader?limit=10000&mimetype=image/png'
            },
            {
                test: /\.svg/,
                loader: 'url-loader?limit=26000&mimetype=image/svg+xml'
            },
            {
                test: /\.(woff|woff2|ttf|eot)/,
                loader: 'url-loader?limit=1'
            },
            {
                test: /\.jsx?$/,
                loader: 'babel',
                exclude: [/node_modules/, /public/]
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            },
            {
                enforce: 'pre',
                test: /\.html/,
                loader: 'htmlhint',
                exclude: /node_modules/
            },
        ]
    },
    resolve: {
        modules: [
            "node_modules",
            path.resolve(__dirname, "src")
        ],
        extensions: [".js", ".json", ".jsx", ".css", ".less"]
    },
    performance: {
        hints: "warning", // enum
        maxAssetSize: 200000, // int (in bytes),
        maxEntrypointSize: 400000, // int (in bytes)
        assetFilter: function(assetFilename) {
            return assetFilename.endsWith('.css') || assetFilename.endsWith('.js');
        }
    },
    devtool: process.env.NODE_ENV !== 'production' ? 'eval-source-map' : null,
    context: __dirname, // string (absolute path!)
    target: "web", // enum
    stats: {
        assets: true,
        assetsSort: "field",
        cached: true,
        chunks: true,
        chunkModules: true,
        chunkOrigins: true,
        chunksSort: "field",
        context: "../src/",
        colors: true,
        errors: true,
        errorDetails: true,
        hash: true,
        modules: true,
        modulesSort: "field",
        publicPath: true,
        reasons: true,
        source: true,
        timings: true,
        warnings: true
    },
    devServer: {
        contentBase: [path.join(__dirname, "public"), path.join(__dirname, "assets")],
        compress: true,
        port: 3000,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        historyApiFallback: true,
        host: "0.0.0.0",
        overlay: {
            warnings: true,
            errors: true
        },
        port: 3000,
        watchContentBase: true,
        publicPath: "assets"
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendor',
            filename: 'vendor-[hash].min.js',
        }),
        new ExtractTextPlugin("styles.css"),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                warnings: false,
                drop_console: false,
            }
        }),
        /*new CleanWebpackPlugin(['public/assets'], {
            root: path.resolve(__dirname, "./"),
            verbose: true,
            dry: false
        }),*/
        new DashboardPlugin(),
        new webpack.HotModuleReplacementPlugin(),
        new NpmInstallPlugin({
            dev: false,
            peerDependencies: true,
            quiet: false,
        })
    ]
}

Answer 1

好像是一个known issue with NpmInstallPlugin。您可能想要删除该插件，直到它得到修复。

Answer 2

你可以尝试使用npm-install-webpack2-plugin

这些是发行说明草稿：

• Added a quiet option - enabling it will silence npm install output.
• Check if modules are resolvable from the current working directory instead of checking dependencies and devDependencies in package.json . package.json is now optional - the plugin will no longer create it if it doesn't exist.
• If package.json exists, the plugin will --save newly-installed dependencies to it as usual.
• Allow Webpack to attempt to resolve loaders first, as module.resolveLoaders configuration may enable resolving of loaders which aren't resolvable from the current working directory.
• Added support for Babel presets specified as a [preset, options] array.
• Added compatibility for Webpack 2 creating resolvers later in the process.