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

这些是草稿发布说明：

添加了一个安静的选项 - 启用它会使npm安装输出静音。

检查模块是否可从当前工作目录中解析，而不是检查package.json中的依赖项和devDependencies。   package.json现在是可选的 - 如果插件将不再创建它   它不存在。

如果package.json存在，插件会像往常一样对它进行新安装的依赖。

允许Webpack首先尝试解析加载器，因为module.resolveLoaders配置可以解析加载器   哪些不能从当前工作目录中解析。

添加了对指定为[预设，选项]数组的Babel预设的支持。

在此过程的后期添加了Webpack 2创建解析器的兼容性。

Webpack 2错误：无法读取null

2 个答案: