webpack打包的时候报错，错在哪了

Question

我在打包的时候报了这个错

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.entry should be one of these:
   object { <key>: non-empty string | [non-empty string] } | non-empty string | [non-empty string] | function
   The entry point(s) of the compilation.
   Details:
    * configuration.entry['main'] should be a string.
    * configuration.entry['main'] should NOT have duplicate items (items ## 0 and 1 are identical) ({
        "keyword": "uniqueItems",
        "dataPath": ".entry['main']",
        "schemaPath": "#/definitions/common.nonEmptyArrayOfUniqueStringValues/uniqueItems",
        "params": {
          "i": 1,
          "j": 0
        },
        "message": "should NOT have duplicate items (items ## 0 and 1 are identical)",
        "schema": true,
        "parentSchema": {
          "items": {
            "minLength": 1,
            "type": "string"
          },
          "minItems": 1,
          "type": "array",
          "uniqueItems": true
        },
        "data": [
          "display-modules",
          "display-modules"
        ]
      }).
      [non-empty string]
    * configuration.entry['main'] should be one of these:
      non-empty string | [non-empty string]
    * configuration.entry should be a string.
    * configuration.entry should be an array:
      [non-empty string]
    * configuration.entry should be an instance of function
      function returning an entry object or a promise..

我的配置文件是这样的

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');



module.exports = {
    output: {
        path:  __dirname + '/build',
        publicPath:'/build',
        filename: '[name]_[chunkhash:8].js',
        library: '[name]',
    },
    entry: {
        "lib": ['jquery','js-cookie','icheck','store','placeholder','toastr']
    },
    plugins: [
        new webpack.ProvidePlugin({
            'jQuery': 'jquery',
            'window.jQuery':'jquery'
        }),
        new webpack.optimize.UglifyJsPlugin({
            output: {
                comments: false,
            },
            compress: {
                warnings: false
            }
        }),
        new webpack.DllPlugin({
            path: 'manifest.json',
            name: '[name]',
            context: __dirname,
        }),
        new HtmlWebpackPlugin({
            template: 'html-loader!../templates/layout.html',
            filename: '../../templates/layout.html',
            xhtml:true,
            inject: 'head'
        }),
        new HtmlWebpackPlugin({
            template: 'html-loader!../templates/order/order.html',
            filename: '../../templates/order/order.html',
            xhtml:true,
            inject: 'head'
        }),
        new HtmlWebpackPlugin({
            template: 'html-loader!../templates/order/pay.html',
            filename: '../../templates/order/pay.html',
            xhtml:true,
            inject: 'head'
        }),
        new HtmlWebpackPlugin({
            template: 'html-loader!../templates/order/wechat.html',
            filename: '../../templates/order/wechat.html',
            xhtml:true,
            inject: 'head'
        }),
        new HtmlWebpackPlugin({
            template: 'html-loader!../templates/register/organ-cellphone.html',
            filename: '../../templates/register/organ-cellphone.html',
            xhtml:true,
            inject: 'head'
        }),
        new HtmlWebpackPlugin({
            template: 'html-loader!../templates/register/organ-email.html',
            filename: '../../templates/register/organ-email.html',
            xhtml:true,
            inject: 'head'
        }),
        new HtmlWebpackPlugin({
            template: 'html-loader!../templates/register/organ-profile.html',
            filename: '../../templates/register/organ-profile.html',
            xhtml:true,
            inject: 'head'
        }),
        new HtmlWebpackPlugin({
            template: 'html-loader!../templates/register/person-profile.html',
            filename: '../../templates/register/person-profile.html',
            xhtml:true,
            inject: 'head'
        }),
        new HtmlWebpackPlugin({
            template: 'html-loader!../templates/register/person-register.html',
            filename: '../../templates/register/person-register.html',
            xhtml:true,
            inject: 'head'
        }),
        new HtmlWebpackPlugin({
            template: 'html-loader!../templates/login/logout.html',
            filename: '../../templates/login/logout.html',
            xhtml:true,
            inject: 'head'
        })
    ],
};

请问错在哪了呢

Answer 1

你的这个入口文件是错误的， jquery之类的公共模块需要提取出来,参考一下这个插件。

还有就是多页面入口和模板插件HtmlWebpackPlugin写成类似这样的形式更好,

const htmlPages = function() {
    const pageDir = path.resolve(__dirname, './src/templates');
    const templateFiles = glob.sync(`${pageDir}/**/*.html`);
    const configHtmlPlugins = [];
    templateFiles.forEach(item => {
        const pageName = item.substring(item.lastIndexOf('\/') + 1, item.lastIndexOf('.'));
        const htmlPlugin = new HtmlWebpackPlugin({
            title: pageName,
            template: item,
            filename: `${pageName}.html`,
            inject: 'body',
            chunks: [pageName],
            hash: true
        });
        configHtmlPlugins.push(htmlPlugin);
    });

    return configHtmlPlugins;
};

module.exports = {
    ...
    plugins: [
        ...htmlPages()
    ]
    ...
}

具体你看下这篇文章吧,写的的很详细webpack多页面的配置,不过这篇博客webpack还在1.*，现在都3.5了， 所以楼主你最好还是要自己看下文档，webpack中文官网。

我之前也配了一个简单的多页面的配置文件，你可以参考下，然后在结合自己实际情况来写webpack配置

Answer 2

should be a string.

For example

entry: {
    fron: './src/fron.js',
    back: './src/back.js'
}

Answer 3

最后怎么解决的？

Answer 4

我已经找到答案了