Webpack 2 Fehler: Kann Eigenschaft 'plugin' von null nicht lesen

Question

Ich bin neu bei Webpack, also versuche ich, configuartion zu erstellen, das von Grund auf meine Anforderungen erfüllt. Es sieht für mich völlig in Ordnung, aber wenn ich webpack-dev-server Befehl betreibe ich bekam Fehler:

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) 

Hier ist meine 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

Es scheint, dass es sich um eine known issue with NpmInstallPlugin ist . Möglicherweise möchten Sie das Plugin entfernen, bis es behoben wird.

Answer 2

können Sie versuchen, npm-install-webpack2-plugin

Diese sind die Release Entwurf Noten sind zu verwenden: vor

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